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 "else" 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?
Here is my java-script code:
window.addEventListener("load", (event) => {
var buttons = document.querySelectorAll('.btn');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
var switcher = buttons[i];
if (switcher == 0 ) {
const t = "test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < 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("img");
img.src = color[0].image;
var oldImg = document.getElementById('bigpic');
document.querySelector('div.api-wrapper').replaceChild(img, oldImg);
};
});
}
else if (switcher == 1) {
const t = "test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < 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("img");
img.src = color[1].image;
var oldImg = document.getElementById('bigpic');
document.querySelector('div.api-wrapper').replaceChild(img, oldImg);
};
});
}
else {
const t = "test.json"
fetch(t)
.then(function (response) {
return response.json();
})
.then(function (jsonObject) {
const color = jsonObject['color'];
for (let i = 0; i < 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("img");
img.src = color[2].image;
var oldImg = document.getElementById('bigpic');
document.querySelector('div.api-wrapper').replaceChild(img, oldImg);
console.log(switcher);
};
});
}
}
}
})
