Assigning element attribute to an other element's innerhtml. Javascript/HTML

Question

I'm working on a website, and the pictures page I'm trying to create has 1 big picture, with smaller thumbnails underneath. I have a javascript function in the head:

function loadThumbnail(divID){ document.getElementById("mainPicture").src = document.getElementById(divID).src; document.getElementById("mainPicture").alt = document.getElementById(divId).alt; document.getElementById("caption").innerHTML = document.getElementById(divId).alt; }

The parameter divID is a misleading title, it's actually the ID of the img element that holds the thumbnail. The function is called whenever the user clicks a thumbnail. The .src bit works, but I can't get the function to change the caption to the picture. Any idea why?

Edit: Here's the HTML

<img id="mainPicture" src="images/food/chickenAndCheeseFries1.png" width="420" height="313" alt="Chicken Tenders and Cheese Fries">

<p id="caption">Chicken tenders and cheese fries</p>

<div onClick="loadThumbnail('t1')" id="thumbnail1" class="thumbnail">
                                <div id="thumbnailPic1" class="thumbnailPic">
                                    <img id="t1" src="images/food/buffaloAndHotWings1.png" width="105" height="80" alt="Sweet Chilly and Buffalo Wings">
                                </div>
                            </div>

At the first line you're using divID and at the other you're using divId which is undefined thus resulting in an error. — Marvin Emil Brach
– Marvin Emil Brach, Commented Mar 12, 2015 at 3:01

Surreal Dreams · Accepted Answer · 2015-03-12 02:59:52Z

2

Make sure the divID variable is used consistently, including the case. It looks like you typoed and used "divId", which won't work. Try it like this, "divID", in all cases.

function loadThumbnail(divID) {
  document.getElementById("mainPicture").src = document.getElementById(divID).src;
  document.getElementById("mainPicture").alt = document.getElementById(divID).alt;
  document.getElementById("caption").innerHTML = document.getElementById(divID).alt;
}

Case matters! divID != divId

answered Mar 12, 2015 at 2:59

Surreal Dreams

26.5k4 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Russell Anthony Carpenella Over a year ago

That's exactly it! Boy, do I feel a bit stupid. Can't believe that flew over of my head. Perhaps I should switch to a naming convention less prone to goofs like this. Thanks a ton!

Surreal Dreams Over a year ago

It happens to everybody. Now you know to look for it. It may sound a little lazy, but careful use of copy/paste can avoid this problem if you have names that give you problems.

Collectives™ on Stack Overflow

Assigning element attribute to an other element's innerhtml. Javascript/HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related