迭代HTML部分

我想遍歷我的 HTML 中的三個元素，一次更改每個部分的屬性。我想我會得到一個帶有 querySelectorAll 的 NodeList，然后使用帶有 NodeList 的計數器進行迭代。它僅在第一部分有效，并回傳此錯誤訊息：

通過指定其 SameSite 屬性指示是否在跨站點請求中發送 cookie

我覺得這應該更簡單，有沒有更簡單的方法來遍歷繞過 cookie 問題的部分？

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>

uj5u.com熱心網友回復：

1. if 中的分號太多
2. 您有重復的 ID - 使用類
3. 拼寫錯誤的物種

我添加了一個計數器和一個重置來簡化并允許提取以 100 毫秒的延遲運行

注意 window.addEventListener 在運行點擊腳本之前等待頁面加載

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>

標籤：

上一篇：如何在JavaScript中實作Base64.getDecoder().decode(nonceBase64Encoded)？

下一篇：為什么在這種情況下發送后無法設定標頭？