title: querySelectorAll (list) retrieve specific values inside each object by clicking
body: <p>from a querySelectorAll I retrieve every objects from a specific class <br/>(list - all the same but with specific value inside...) :
  <br/>- I create buttons (event) for each objects
  <br/>- Each object have a specific value
  <br/>- When clicking on one object. I need to show this specific value contained inside this object.</p>
  
  <p>I'm currently doing it with pure javascript</p>
  
  <p>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...</p>
  
  <p>----- EDIT : html added-----</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function hello(d)
  {
  alert("" + d);
  }
  
  var Images = document.querySelectorAll('.block-image_carousel-single &gt; figcaption');
  
  for (var i = 0; i &lt; Images.length; i++) {
  
  var Image = Images[i];
  
  Image.addEventListener('click', function (event) {  
  
      event.preventDefault();
  
      hello(Image.textContent);
  }, false);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="block-image_carousel"&gt;
  &lt;div&gt;
     &lt;div class="block-main-image_carousel-display"&gt;
        &lt;img src="img.png" class="block-image_carousel-display"&gt;
        &lt;figcaption&gt; Image 1 &lt;/figcaption&gt;
     &lt;/div&gt;
     &lt;div class="block-image_carousel-single"&gt;
        &lt;img src="img.png"&gt;
        &lt;figcaption&gt; Image 1 &lt;/figcaption&gt;
     &lt;/div&gt;
     &lt;div class="block-image_carousel-single"&gt;
        &lt;img src="img.png"&gt;
        &lt;figcaption&gt; Image 2 &lt;/figcaption&gt;
     &lt;/div&gt;
     &lt;div class="block-image_carousel-single"&gt;
        &lt;img src="img.png"&gt;
        &lt;figcaption&gt; Image 3 &lt;/figcaption&gt;
     &lt;/div&gt;
     &lt;div class="block-image_carousel-single"&gt;
        &lt;img src="img.png"&gt;
        &lt;figcaption&gt; Image 4 &lt;/figcaption&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>When clicking on one object. I need to show this specific value contained inside this object.</li>
  <li>But whenever, these objects are clicked it's only the last object value come up...</li>
  </ul>
  
  <p>ANSWER : use let instead of var for image.</p>