CODEWITHSUNDEEP
javascriptdom
mfroese
mfroese

Reputation: 309

JavaScript and querySelector

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?

Upvotes: 1

Views: 8277

Answers (4)

brig
brig

Reputation: 3783

Try this code 

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

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

Upvotes: -1

Thomas Junk
Thomas Junk

Reputation: 5676

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 compatibility of map.

Upvotes: 0

Rachid
Rachid

Reputation: 832

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.

Upvotes: 0

SomeKittens
SomeKittens

Reputation: 39522

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.net/j8ZUJ/1/

Upvotes: 6

Related Questions