querySelectorAll (list) retrieve specific values inside each object by clicking

Question

from a querySelectorAll I retrieve every objects from a specific class
(list - all the same but with specific value inside...) :
- I create buttons (event) for each objects
- Each object have a specific value
- When clicking on one object. I need to show this specific value contained inside this object.

I'm currently doing it with pure javascript

I use tree HMTL node to move inside and take the data. But whenever, these objects are clicked it's only the last object value come up...

----- EDIT : html added-----

function hello(d)
{
alert("" + d);
}

var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');

for (var i = 0; i < Images.length; i++) {

var Image = Images[i];

Image.addEventListener('click', function (event) {  

    event.preventDefault();

    hello(Image.textContent);
}, false);
}

<div class="block-image_carousel">
<div>
   <div class="block-main-image_carousel-display">
      <img src="img.png" class="block-image_carousel-display">
      <figcaption> Image 1 </figcaption>
   </div>
   <div class="block-image_carousel-single">
      <img src="img.png">
      <figcaption> Image 1 </figcaption>
   </div>
   <div class="block-image_carousel-single">
      <img src="img.png">
      <figcaption> Image 2 </figcaption>
   </div>
   <div class="block-image_carousel-single">
      <img src="img.png">
      <figcaption> Image 3 </figcaption>
   </div>
   <div class="block-image_carousel-single">
      <img src="img.png">
      <figcaption> Image 4 </figcaption>
   </div>
</div>
</div>

When clicking on one object. I need to show this specific value contained inside this object.
But whenever, these objects are clicked it's only the last object value come up...

ANSWER : use let instead of var for image.

replace the `var` keyword inside your loop (`var i = 0`) to `let`.. it should do the trick :) — ymz, Jan 16 '19 at 18:07
^.. + you're overriding the collection in the loop, use a different variable name. See [this post](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) to better understand ymz'es comment. — Teemu, Jan 16 '19 at 18:08
`var Image = Images[i];` should be `let Image = Images[i];`.. when using **var** you are overriding the **same** variable. **let** will allow you to allocate **different** space in memory, hence preserve the original image reference for each event — ymz, Jan 16 '19 at 18:14
@ymz pretty nice trick to change var by let ;) I'm going to learn more about this — CharlieWhite, Jan 16 '19 at 18:30

AndrewL64 · Accepted Answer · 2019-01-16T18:41:34.597

Remove the for loop and use the forEach() method instead to add a click listener to each element and extract the textContent from each figcaption inside the element.

Check and run the following Code Snippet for a practical example of what I described above:

function hello(d) { alert("" + d) }

var images = document.querySelectorAll('.block-image_carousel-single > figcaption');

images.forEach(image => {
  image.addEventListener('click', function(e) {
    e.preventDefault();
    hello(image.textContent);
  }, false);
});

<div class="block-image_carousel">
  <div>
    <div class="block-main-image_carousel-display">
      <img src="https://picsum.photos/1000/200" class="block-image_carousel-display">
      <figcaption> Image 1 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 1 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 2 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 3 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 4 </figcaption>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jan 16 '19 at 18:10

Try this

function hello(f,d)
{
    alert(f,d);
}

var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');

for (var i = 0; i < Images.length; i++) {

    var Image = Images[i];

    Image.addEventListener('click', function (event) {  

        event.preventDefault();

        hello(this, Image.textContent);
    }, false);
}

score 0 · Answer 3 · answered Jan 16 '19 at 18:11

0

Your code is overwriting the "Images" var in the for loop, and only the last instance in the loop is being saved to Images. Also you defined Images twice?

Try modifying your code to this:

   function hello(f,d)
{
alert(f,d);
}

var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');
for (var i = 0; i < Images.length; i++) {

Images[i].addEventListener('click', function (event) { 
event.preventDefault();

hello(this, Images.textContent);
},false);
}

answered Jan 16 '19 at 18:11

Lord Elrond

13,430
7
40
80

it's return undefined. Added HTML and javascript – CharlieWhite Jan 16 '19 at 18:22
try using the forEach method AndrewL64 provided. I think that might work. – Lord Elrond Jan 16 '19 at 18:44

gaetanoM · Answer 4 · 2019-01-16T18:36:46.603

Your issue is variable scoping, when the for loop ends the variable contains the last value.

You may use this.textContent in the event handler instead of Image.textContent. Or you may use let instead of var in the for loop. Another way to solve it is with IIFE

function hello(d) {
    alert("" + d);
}

var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');
for (var i = 0; i < Images.length; i++) {
    var Image = Images[i];
    Image.addEventListener('click', function (event) {
        event.preventDefault();
        hello(this.textContent);
    }, false);
}

//
// ...loop using let
//
for (let i = 0; i < Images.length; i++) {
    var Image = Images[i];
    Image.addEventListener('click', function (event) {
        event.preventDefault();
        hello(Images[i].textContent);
    }, false);
}

<div class="block-image_carousel">
    <div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png" class="block-image_carousel-display">
            <figcaption> Image 0 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 1 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 2 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 3 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 4 </figcaption>
        </div>
    </div>
</div>

querySelectorAll (list) retrieve specific values inside each object by clicking

4 Answers4