I am working on a function with one parameter, and it should be called with an argument in an Html file, my problem is that this function should loop through fetched data from a local JSON File, the parameter takes a part in the code inside the fetch method, so I cant call the main function, any solutions?!! hope my code shows it clearly
HTML code:
<div class="on-off-btns">
<span onclick="showSlide(counter=1)">moon</span>
<span onclick="showSlide(counter=2)">mars</span>
<span onclick="showSlide(counter=3)">europa</span>
<span onclick="showSlide(counter=4)">titan</span>
</div>
javascript code:
let links = document.querySelectorAll(".on-off-btns span");
let counter = 1;
let myFile = "./data.json";
const showSlide = (s) => {
fetch(myFile)
.then((res) => res.json())
.then((data) => {
for (let i = 0; i < data.destinations.length; i++) {
for (let j = 0; j < links.length; j++) {
if (s > data.destinations.length) {
counter = 1;
} else if (s < 1) {
counter = data.destinations.length;
}
}
images.src = data.destinations[counter - 1].images["png"];
titles.textContent = data.destinations[counter - 1].name;
descriptions.textContent = data.destinations[counter - 1].description;
}
});
};
