Переменная ошибка в функции, вызываемой в 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>"; 

Я хотел бы назвать функция imtest с 2 переменными через метод innerhtml. Ниже приведен полный код для справки:

<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

Рабочий код ...

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 2

Вам просто нужно добавить кавычки 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 3

В функции imtest вы передаете только один параметр и на onclick вы принимаете два параметра. Обратите внимание: Принимая, вы должны писать вот так.

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