使用“=”测试相等性时“if”语句的意外行为[关闭]

Question

我有以下 JavaScript 代码，用于将页面的 <div> 中包含的代码替换为另一个页面的一部分：

    function ReplaceContentInContainer(etiqueta) {
        var container = document.getElementById('contenedor');
        if (etiqueta="esTransportista") {
            container.innerHTML = document.getElementById('transportista').innerHTML;
        } else if (etiqueta="esCargador") {
            container.innerHTML = document.getElementById('cargador').innerHTML;
        }

    }

然后我使用以下代码从页面调用它：

<input type='radio' name='esTransportista' id='esTransportista' value='1' onclick="javascript:ReplaceContentInContainer(esTransportista);">Es transportista <br />
<input type='radio' name='esTransportista' id='esCargador' value='0' onclick="javascript:ReplaceContentInContainer(esCargador);" checked>Es cargador <br />

最后，我的页面中有三个<div>'s，一个用于显示信息< div id='contenedor'>< /div>，另外两个包含要在我提到的id='contenedor' 中显示的代码（它们是<div id='transportista'>bla bla bla< /div> 和@ 987654328@)。

我面临的问题是 JavaScript 代码似乎只运行一次。它会在我第一次选中其中一个单选按钮时更改“竞争者”的内容，但如果我选中另一个单选按钮，JavaScript 将不再工作。

有什么方法可以让 JavaScript 代码在我每次点击任何单选按钮时都能正常工作？

我一直在谷歌上搜索，我浏览的大部分结果都是关于 jQuery 和绑定到消失的元素，但据我所知，这不是我的情况......

Answer 1

只是快速扫描您的代码，发现您的 if (etiqueta="esTransportista") 语句不正确。 比较两个对象时，您需要 ==

试试

  function ReplaceContentInContainer(etiqueta) {
        var container = document.getElementById('contenedor');
        if (etiqueta=="esTransportista") {
            container.innerHTML = document.getElementById('transportista').innerHTML;
        } else if (etiqueta=="esCargador") {
            container.innerHTML = document.getElementById('cargador').innerHTML;
        }

    }

Answer 2

您的 javascript 有一个小错误：

function ReplaceContentInContainer(etiqueta) {
        var container = document.getElementById('contenedor');
        if (etiqueta == "esTransportista") {
            container.innerHTML = document.getElementById('transportista').innerHTML;
        } else if (etiqueta == "esCargador") {
            container.innerHTML = document.getElementById('cargador').innerHTML;
        }
    }

请注意 if 语句中的 etiqueta = "esTransportista"。这将使其将“esTransportista”保存到 etiqueta，并将进入 if 语句的那部分。

通过将= 更改为==，您可以比较它是否为真。

编辑

您还应该更改 onclick="..." 部分以将名称放在单引号中：

onclick="javascript:ReplaceContentInContainer('esTransportista');"
onclick="javascript:ReplaceContentInContainer('esCargador');" 

这可确保 javascript 不会查找具有这些名称的变量并且知道您正在传递字符串。

Answer 3

有两件事会阻止您的代码正常工作：

• 您将未定义的变量而不是字符串传递给函数
• 您正在使用=，而您应该使用===

您在点击处理程序中使用的 JavaScript 表达式是这样的：

ReplaceContentInContainer(esTransportista);

这里，esTransportista 是一个变量引用，但是由于您没有具有该名称的变量，所以值 undefined 将传递给您的函数。

在你的函数内部，etiqueta 的值是 undefined，但是当这个 if 语句执行时

if (etiqueta = "esTransportista") {
    container.innerHTML = document.getElementById('transportista').innerHTML;
}

赋值运算符= 将值"esTransportista" 分配给etiqueta，然后将该值传递给if 语句。 "esTransportista" 是“真实的”，因此 if 块的主体将始终运行。

---

为了让您的代码按预期工作，

1. 将字符串值传递给您的函数，而不是未定义的变量：

ReplaceContentInContainer("esTransportista")  // note the quotes here    
ReplaceContentInContainer("esCargador")  // note the quotes here    

1. 使用=== 运算符将变量与值进行比较：

if (etiqueta === "esTransportista") {
    container.innerHTML = document.getElementById('transportista').innerHTML;
} else if (etiqueta === "esCargador") {
    container.innerHTML = document.getElementById('cargador').innerHTML;
}

jsfiddle

---

作为一项额外的（尽管是可选的）改进。我建议在你的代码中设置你的点击处理程序，而不是把它们放在你的 HTML 中。这样做的一种方法（不要太花哨）如下所示：

window.onload = function () {
    document.getElementById("esTransportista").onclick = function () {
        ReplaceContentInContainer("esTransportista");
    };

    document.getElementById("esCargador").onclick = function () {
        ReplaceContentInContainer("esCargador"); 
    };
};

如果您将其放入代码中，您可以删除单选按钮上的 onclick 属性并将它们保留为：

<input type='radio' name='esTransportista' id='esTransportista' value='1'>Es transportista
<br />
<input type='radio' name='esTransportista' id='esCargador' value='0' checked>Es cargador
<br />

jsfiddle