# Multiple innerHTML help

**URL:** https://forum.kirupa.com/t/multiple-innerhtml-help/294184
**Category:** Uncategorized
**Created:** [August 10, 2009, 5:18pm UTC](https://forum.kirupa.com/t/multiple-innerhtml-help/294184 "2009-08-10T17:18:27Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Navarone](https://avatars.discourse-cdn.com/v4/letter/n/f9ae1b/32.png) [@Navarone](https://forum.kirupa.com/u/Navarone)
#### Post date: [August 10, 2009, 5:18pm UTC](https://forum.kirupa.com/t/multiple-innerhtml-help/294184/1 "2009-08-10T17:18:27Z")

</div>

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?

```auto

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>

```