Iteration over HTML sections
I want to iterate over three elements in my HTML, changing the attributes in each section, one section at a atime. I thought I'd get a NodeList with querySelectorAll and then use a counter with the NodeList to iterate. It works in the first section only, and returns this error message:
Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
I feel like this should be simpler, is there an easier way to iterate over the sections that bypasses the cookies issue?
const button = document.querySelector('button');
generateRandom = () => {
return Math.floor(Math.random() * 826);
}
getCharacters = () => {
var sections = document.querySelectorAll('section');
for (var i = 0; i < 4; i++;) {
let randomNumber = generateRandom();
return fetch(`https://rickandmortyapi.com/api/character/${randomNumber}`, {
method: 'GET',
headers: {
Accept: 'application/json',
"Content-type": 'application/json'
}
}).then((response) => response.json()).then((data) => {
let section = sections[i];
let image = section.querySelector('img');
let characterName = section.querySelector('#name');
let especie = section.querySelector('#species');
let state = section.querySelector('#status');
image.src = data.image;
image.alt = data.name;
characterName.innerHTML = data.name
species.innerHTML = data.species;
state.innerHTML = data.status;
})
}
}
button.onclick = getCharacters;<main>
<section>
<img alt="Smiling Rick" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfO2QcnGNdEZnWgjmwCDTUN1okIqAlXt5UkwZEl7qui4Poc-vO">
<ul id="config-container">
<li>Name:
<p id="name"></p>
</li>
<li>Species:
<p id="species"></p>
</li>
<li>Status:
<p id="status"></p>
</li>
</ul>
</section>
<section>
<img alt="Rick and Morty logo" src="https://www.baconfrito.com/wp-content/uploads/2017/10/rick-morty-title.jpg">
<ul id="config-container">
<li>Name:
<p id="name"></p>
</li>
<li>Species:
<p id="species"></p>
</li>
<li>Status:
<p id="status"></p>
</li>
</ul>
<button>Click to see more characters</button>
</section>
<section>
<img alt="Smiling Morty" src="https://static.wikia.nocookie.net/rickandmorty/images/e/ee/Morty501.png/revision/latest/top-crop/width/360/height/360?cb=20210827150137">
<ul id="config-container">
<li>Name:
<p id="name"></p>
</li>
<li>Species:
<p id="species"></p>
</li>
<li>Status:
<p id="status"></p>
</li>
</ul>
</section>
</main>- You have a semicolon too many in the if
- You have duplicate IDs - use class
- Misspelled species
I added a counter and a reset to simplify and to allow the fetch to run with 100 milliseconds delay
Note the window.addEventListener which waits for the page to load before running the click script
const generateRandom = () => {
return Math.floor(Math.random() * 826);
}
const sections = document.querySelectorAll('section');
let cnt = 0;
let tId;
const getCharacters = () => {
if (cnt == sections.length) return;
let randomNumber = generateRandom();
fetch(`https://rickandmortyapi.com/api/character/${randomNumber}`, {
method: 'GET',
headers: {
Accept: 'application/json',
"Content-type": 'application/json'
}
}).then((response) => response.json()).then((data) => {
let section = sections[cnt];
let image = section.querySelector('img');
let characterName = section.querySelector('.name');
let species = section.querySelector('.species');
let state = section.querySelector('.status');
image.src = data.image;
image.alt = data.name;
characterName.innerHTML = data.name
species.innerHTML = data.species;
state.innerHTML = data.status;
cnt++;
tId = setTimeout(getCharacters, 100); // fetch again in 100 milliseconds
})
}
window.addEventListener("load", function() {
const button = document.querySelector('button');
button.addEventListener("click", function() {
cnt = 0; // start from 0
clearTimeout(tId); // stop any running process
getCharacters();
})
getCharacters(); // initialise
})<main>
<button>Click to see more characters</button>
<section>
<img alt="Smiling Rick" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfO2QcnGNdEZnWgjmwCDTUN1okIqAlXt5UkwZEl7qui4Poc-vO">
<ul class="config-container">
<li>Name:
<p class="name"></p>
</li>
<li>Species:
<p class="species"></p>
</li>
<li>Status:
<p class="status"></p>
</li>
</ul>
</section>
<section>
<img alt="Smiling Rick" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfO2QcnGNdEZnWgjmwCDTUN1okIqAlXt5UkwZEl7qui4Poc-vO">
<ul class="config-container">
<li>Name:
<p class="name"></p>
</li>
<li>Species:
<p class="species"></p>
</li>
<li>Status:
<p class="status"></p>
</li>
</ul>
</section>
</main>