I have this HTML:

<div id="allSteps">
  <h3>Intermediate steps</h3>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image" ></span>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image"></span>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image"></span>
</div>

In javaScript, how do I access the .src for each image?

I tried the following but it gives me an error:

document.querySelector(".staticStep img").src[0] = images[num][0];
document.querySelector(".staticStep img").src[1] = images[num][1];
document.querySelector(".staticStep img").src[2] = images[num][2];

I also tried the following but it gives me a an error:

document.querySelector(".staticStep img")[0].src = images[num][0];
document.querySelector(".staticStep img")[1].src = images[num][1];
document.querySelector(".staticStep img")[2].src = images[num][2];

What am I doing wrong?

I have this HTML:

<div id="allSteps">
  <h3>Intermediate steps</h3>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image" ></span>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image"></span>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image"></span>
</div>

In javaScript, how do I access the .src for each image?

I tried the following but it gives me an error:

document.querySelector(".staticStep img").src[0] = images[num][0];
document.querySelector(".staticStep img").src[1] = images[num][1];
document.querySelector(".staticStep img").src[2] = images[num][2];

I also tried the following but it gives me a an error:

document.querySelector(".staticStep img")[0].src = images[num][0];
document.querySelector(".staticStep img")[1].src = images[num][1];
document.querySelector(".staticStep img")[2].src = images[num][2];

What am I doing wrong?

• javascript
• dom

4 Answers 4

Try using document.querySelectorAll which returns all of the possible results instead of just the first one. The error you're getting (Uncaught TypeError: Cannot set property 'src' of undefined) is because querySelector only returns the first element found, not an array (and elements can't be accessed like arrays).

jQuery (the inspiration for querySelector and querySelectorAll) always allows you to access like an array ($('.staticStep img')[0] works), so this is probably where your confusion stems from.

Quick JSFiddle example: http://jsfiddle/j8ZUJ/1/

document.querySelector returns the first element within the document thus the error. you probalbly want to try: document.querySelectorAll

var elements = document.querySelectorAll(".staticStep img");

elements[0].src  =.....
elements[1].src  =.....
elements[2].src  =.....

Or you could use jQuery instead.

Try this to return all src:

map = Function.prototype.call.bind([].map);
map(document.querySelectorAll(".image"), function(o){
    return o.src;
});

or set src just with

o.src="whatever";

Here is the Fiddle.

Look MDN for patibility of map.

Try this code

document.querySelector('.staticStep :nth-child(i)').src = images[num][i];

where i = 0,1,2,--- ,n.