Question

Currently I am trying to use <div> and <span> tags as labels for my JavaScript. This works when using IE and Google Chrome, but does not work in FireFox. The JavaScript Error Console says “imgNo is not defined”.

This is the function where I set the div tag:

function next_picture() {
        if (document.images) {
            if (pictureNum < 21) {
                pictureNum++;
                document.TravelAlberta.src = picture[pictureNum].src;
                imgNo.innerHTML = "Image " + (pictureNum + 1) + " of 22";
            }
            else
                alert("This is last picture");
        }
        else
            alert("Your browser does not support images");
    }

This is the code in the Body

<div id="imgNo" class="style1">
    Image 1 of 22</div>
<p class="style1">
    <img alt="" class="style3" src="images/back_button.gif" id="Back" name="Back" onclick="back_picture()" />

    <img alt="" class="style4" src="images/next_button.gif" id="Next" name="Next" onclick="next_picture()" /></p>

Answer 1

Bad practice is causing your problem. Some browser will use element ids for variable names if the variable is not defined. You should use getElementById.

document.getElementById("imgNo").innerHTML = "Image " + (pictureNum + 1) + " of 22";