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

Posted 2023-03-05

【中文标题】使用“=”测试相等性时“if”语句的意外行为[关闭]

【英文标题】：Unexpected Behavior of "if" statement when using "=" to test for equality [closed]

【发布时间】：2015-02-18 19:11:58

【问题描述】：

我有以下 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 和绑定到消失的元素，但据我所知，这不是我的情况......

【参考方案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;
        

    

【讨论】：

=== 优于 ==。

@JLRishe – 这真的取决于上下文。对于那些想知道的人，=== 调用是依赖于类型的 exact 匹配，而 == 是非依赖于类型的 soft 匹配。 'true' == true 返回 true，'true' === true 返回 false。

@JoshBurgess 不，这并不取决于上下文。 == 的行为怪异且难以预测，普遍的智慧是永远不要使用它 (***.com/a/359509/1945651)。仅供参考，'true' == true 评估为false。明白我所说的难以预测是什么意思了吗？

有点旁注，但这个答案不完整。

【参考方案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 不会查找具有这些名称的变量并且知道您正在传递字符串。

【讨论】：

这个答案不完整。

【参考方案3】：

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

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

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

ReplaceContentInContainer(esTransportista);

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

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

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

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

---

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

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

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

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

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