在 InnerHTML 中调用的函数中的变量错误

Question

我是编码新手，遇到从 innerhtml 调用函数的问题。我怀疑问题可能与 innerhtml 语法有关。 有问题的部分是：

document.getElementById('arrowback').innerHTML = "<a href='#' onclick='return imtest(icount,imname);'><img src=/Images/ib/A2.png></a>";

如果我将语法更改为以下，那么它适用于 icount，它是一个数值，不适用于 imname：

document.getElementById('arrowback').innerHTML = "<a href='#' onclick='return imtest("+icount+");'><img src=/Images/ib/A2.png></a>";

我想通过 innerhtml 方法调用带有 2 个变量的 imtest 函数。以下是完整代码供参考：

<script type="text/javascript">
    function clicker(buildname, imname, icount){
        var displaybox=document.getElementById('displaybox');

        if (displaybox.style.display === "none") {
            alert(imname);

            document.getElementById('imagebox').innerHTML = "<img src=" + imname + icount+".jpg height='400'>";
            document.getElementById('arrowback').innerHTML = "<a href='#' onclick= 'return imtest(icount,imname);'><img src=/Images/ib/A2.png></a>";
            document.getElementById('btitle').innerHTML = buildname;
        } else {
            document.getElementById('displaybox').style.display = "none";
        }
        return false;
    }

    function imtest(icount, imname) {
        alert(icount);
    }
</script>

Answer 1

你只需要在imname周围加上引号：

document.getElementById('imagebox').innerHTML = '<img src="' + imname + icount + '.jpg" height="400">';
document.getElementById('arrowback').innerHTML = '<a href="#" onclick="return imtest(' + icount + ', \"' + imname + '\");"><img src="/Images/ib/A2.png"></a>';

顺便说一句，您忘记了 src 两个属性值的引号，我已经添加了它们，并且我冒昧地将您使用的引号更改为 HTML 中的双引号。

见this codepen。

Answer 2

工作代码...

Javascript

function imtest(icount, imname){
  alert("icount:" + icount + "\n imname: " + imname);
}
function clicker(buildname,imname,icount){

var displaybox=document.getElementById('displaybox');

if(displaybox.style.display == "none"){
    displaybox.style.display = "block";
    document.getElementById('imagebox').innerHTML = "<img src='" + imname + icount+".jpg' height='400'>";
    document.getElementById('arrowback').innerHTML = "<a onclick='return imtest(" + icount + "," + '"' + imname + '"' + ");'><img src='Images/ib/A2.png'></a>";
    document.getElementById('btitle').innerHTML = buildname;

}else{  
  document.getElementById('displaybox').style.display = "none";
}
}

HTML

<div id="displaybox" style="display: none;">
  <h1 id="btitle"></h1>
  <div id="imagebox"></div>
  <div id="arrowback"></div>
</div>
<button onclick="clicker('buildname', 'imname', 'icount');">Clicker</button>

Answer 3

在 imtest 函数中，您只传递一个参数，而 onclick 则接受两个参数。检查它 在接受的同时，你应该这样写。

  document.getElementById('arrowback').innerHTML = '<a href="#" onclick="return imtest(' + icount + ', \"' + imname + '\"');"><img src="/Images/ib/A2.png"></a>';