Variable error in function called in InnerHTML
I am new to coding and am facing a problem calling a function from innerhtml. I suspect the problem may be with the innerhtml syntax. Problematic section:
document.getElementById('arrowback').innerHTML = "<a href='#' onclick='return imtest(icount,imname);'><img src=/Images/ib/A2.png></a>";
If I change the syntax below, it works for icount, which is a numeric value, not imname:
document.getElementById('arrowback').innerHTML = "<a href='#' onclick='return imtest("+icount+");'><img src=/Images/ib/A2.png></a>";
I would like to call imtest function with 2 variables via innerhtml method. Below is the complete code for your reference:
<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>
source to share
Working code ...
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>
source to share
You just need to add quotes around 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>';
By the way, you forgot the quotes around the attribute values src
, I added them and I allowed you to change the quotes you use to have double quotes in your HTML.
See this code .
source to share
In the imtest function, you only pass one parameter, and in onclick, you accept two parameters. Accepting, you should write like this:
document.getElementById('arrowback').innerHTML = '<a href="#" onclick="return imtest(' + icount + ', \"' + imname + '\"');"><img src="/Images/ib/A2.png"></a>';
source to share