javascript - 我的网页上的暗模式按钮有问题。无论我做什么，它总是出错，就好像它是一个无限循环

Question

  var paragraphs = document.getElementsByTagName("p");
    var i = paragraphs.length;
    function toggleDarkMode(){
      while(i> 0){
        paragraphs[i-1].classList.toggle("dark-mode-p");

        i-1;
      }
    }

我试图将变量放在函数中，也没有帮助:(

然后我决定使用 for 循环：

function toggleDarkMode(){
  var paragraphs = document.getElementsByTagName("p");
  for(var i = paragraphs.length; i >= 0; i--){

    paragraphs[i-1]classList.toggle("dark-mode-p");

  }
}

附言。对不起我的英语，我知道它很烂 XD

标签： javascript

Answer 1

在您的第一个示例中，您尝试使用 递减i-1;，这只是解决该值的值。它实际上并没有改变i.

但是，您可以只使用 a 迭代实际数组for ... of，您不需要索引。

function toggleMode() {
  for (const p of Array.from(document.querySelectorAll("p"))) {
    p.classList.toggle("dark-mode-p");
  }
}

document.getElementById("mode-shift").addEventListener("click", () => {
  toggleMode()

})

p.dark-mode-p {
  background-color: black;
  color: white;
}

<main>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</main>
<button id="mode-shift">Mode shift</button>