I am using the innerHtml element and trying to have the text change in my image gallery . When I click on an image changeInfo() function fires but only the “species” id is switch out. Why doesn’t is switch out the other two id’s?
function changeInfo(id) {
//document.getElementById('info').innerHTML = id;
//alert(id);
if (id == 'gp1') {
document.getElementById('species').innerHTML = "Pine";
document.getElementById('dstyles').innerHTML = "Arched";
document.getElementById('finish').innerHTML = "semi-gloss";
} else if (id == 'gp2') {
document.getElementById('species').innerHTML = "Oak";
document.getElementById('dstyles').innerHTML = "Provincial";
document.getElementById('finish').innerHTML = "gloss";
}
}
<!--image gallery-->
<div class="gallery_thumbs">
<a id="gp1" href="javascript:swapimage('gphotos','imgMain', 'images/gallery/kitchens/kitchen1.jpg');changeInfo('gp1');"><img src="images/gallery/kitchens/kitchen1_sm.jpg" alt="" /></a>
<a id="gp2" href="javascript:swapimage('gphotos','imgMain', 'images/gallery/kitchens/kitchen2.jpg');changeInfo('gp2');"><img src="images/gallery/kitchens/kitchen2_sm.jpg" alt="" /></a>
<a id="gp3" href="javascript:swapimage('gphotos','imgMain', 'images/gallery/kitchens/kitchen3.jpg')"><img src="images/gallery/kitchens/kitchen3_sm.jpg" alt="" /></a>
<a id="gp4" href="javascript:swapimage('gphotos','imgMain', 'images/gallery/kitchens/kitchen4.jpg')"><img src="images/gallery/kitchens/kitchen4_sm.jpg" alt="" /></a>
<a id="gp5" href="javascript:swapimage('gphotos','imgMain', 'images/gallery/kitchens/kitchen5.jpg')"><img src="images/gallery/kitchens/kitchen5_sm.jpg" alt="" /></a>
</div>
<!--image gallery text-->
<div class="gallery_info" id="info">
<div class="gallery_item"><strong>Species:</strong> <span id="species">Maple</span></div>
<div class="gallery_spacer"></div>
<div class="gallery_item"><strong>Door Style:</strong> <span id="dstyle">Classic</span></div>
<div class="gallery_spacer"></div>
<div class="gallery_item"><strong>Finish:</strong> <span id="finish">Satin</span></div>
</div>