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>和< div id='cargador'>bla2 bla2 bla2< /div>）。

我面临的问题是JavaScript代码似乎只运行一次。它改变了'contenedor＆＃39;的内容。我第一次检查其中一个单选按钮，但如果我检查另一个单选按钮，则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”保存到礼节中，它将进入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;
}

asssignment运算符 =将值"esTransportista"分配给etiqueta，然后将此值传递到if语句。 "esTransportista"是＆＃34; truthy＆＃34;，因此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

意外的行为＆＃34;如果＆＃34;使用＆＃34; =＆＃34;时的陈述测试平等

3 个答案: