Question

This is the code i used to in coding HTML:

<button id="imageshow" style="display:none">Button1</button>&nbsp;&nbsp;&nbsp;
<button id="imageshow" style="display:none">Button2</button>&nbsp;&nbsp;&nbsp;
<button id="imageshow" style="display:none">Button3</button>&nbsp;&nbsp;&nbsp;<br>
<img src="Images/Image1.jpg" onmouseover="showIt(this.src)"><br>
<button id="imageshow" style="display:none">Button4</button>&nbsp;&nbsp;&nbsp;
<button id="imageshow" style="display:none">Button5</button>&nbsp;&nbsp;&nbsp;
<button id="imageshow" style="display:none">Button6</button>&nbsp;&nbsp;&nbsp;

When i coded this without using style=”display:none”, i am able to add everything fine. But when i coded like above and used the below javascript:

function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
document.getElementById('imageshow').style.display='';
}

function hideIt()
{
document.getElementById('imageshow').style.display='none';
}

Only one button is being added. Can anyone resolve this problem. Thank you

Answer 1

You have multiple elements with the same id, so Javascript only takes the first one. Use class="imageshow" instead and will be ok.

The script would look like this:

function showIt(imgsrc)
{
    var images = document.getElementsByClassName('imageshow');

    for(var i=0; i<images.length; i++)
    {
        images[i].src=imgsrc;
        images[i].style.display='';
    }
}

function hideIt()
{
    var images = document.getElementsByClassName('imageshow');

    for(var i=0; i<images.length; i++)
    {
        images[i].style.display='none';
    }
}