title: Javascript loop value appears as undefined
body: <p>I am having an issue trying to create a loop that changes an image using an if statement in Java-script. I have this set up with four buttons, each button assigned a distinct color. When the button is clicked, the loop is supposed to find the index of the button using buttons[i] to show what was the color chosen using if else statements by choosing the correct index. However, when I click on the button, only the &quot;else&quot; statement is executed and when I went to inspect more, the value of buttons[i] appears to be undefined. What can I do to make sure it is assigned the correct index, and not the value of undefined?</p>
  <p>Here is my java-script code:</p>
  <pre><code>
  window.addEventListener(&quot;load&quot;, (event) =&gt; {
     var buttons = document.querySelectorAll('.btn');
     for (var i = 0; i &lt; buttons.length; i++) {
        buttons[i].onclick = function () {
           var switcher = buttons[i];
           if (switcher == 0 ) {
              const t = &quot;test.json&quot;
              fetch(t)
                 .then(function (response) {
                    return response.json();
                 })
                 .then(function (jsonObject) {
                    const color = jsonObject['color'];
                    for (let i = 0; i &lt; color.length; i++) {
                       let colorTitle = document.createElement('section');
                       let colorName = document.createElement('h2');
                       colorName.textContent = color[0].name;
                       colorTitle.appendChild(colorName);
                       document.querySelector('div.api-wrapper').appendChild(colorTitle);
                       var img = document.createElement(&quot;img&quot;);
                       img.src = color[0].image;
                       var oldImg = document.getElementById('bigpic');
                       document.querySelector('div.api-wrapper').replaceChild(img, oldImg);
  
                    };
                 });
           }
           else if (switcher == 1) {
              const t = &quot;test.json&quot;
              fetch(t)
                 .then(function (response) {
                    return response.json();
                 })
                 .then(function (jsonObject) {
                    const color = jsonObject['color'];
                    for (let i = 0; i &lt; color.length; i++) {
                       let colorTitle = document.createElement('section');
                       let colorName = document.createElement('h2');
                       colorName.textContent = color[1].name;
                       colorTitle.appendChild(colorName);
                       document.querySelector('div.api-wrapper').appendChild(colorTitle);
                       var img = document.createElement(&quot;img&quot;);
                       img.src = color[1].image;
                       var oldImg = document.getElementById('bigpic');
                       document.querySelector('div.api-wrapper').replaceChild(img, oldImg);
  
                    };
                 });
           }
           else {
              const t = &quot;test.json&quot;
              fetch(t)
                 .then(function (response) {
                    return response.json();
                 })
                 .then(function (jsonObject) {
                    const color = jsonObject['color'];
                    for (let i = 0; i &lt; color.length; i++) {
                       let colorTitle = document.createElement('section');
                       let colorName = document.createElement('h2');
                       colorName.textContent = color[2].name;
                       colorTitle.appendChild(colorName);
                       document.querySelector('div.api-wrapper').appendChild(colorTitle);
                       var img = document.createElement(&quot;img&quot;);
                       img.src = color[2].image;
                       var oldImg = document.getElementById('bigpic');
                       document.querySelector('div.api-wrapper').replaceChild(img, oldImg);
                       console.log(switcher);
  
                    };
                 });
           }
        }
     }
  })
  </code></pre>