我的网页上的暗模式按钮有问题。无论我做什么，它总是会像是无限循环一样出现错误

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");

  }
}

Ps。对不起，我的英语，我知道那很烂XD

Answer 1

另一个选择是仅从BODY添加/删除一个类。

然后在要更改颜色的任何div上将其称为：mode-change-p，仅在主体处于黑暗模式时才修改该类。这将使您无需更改javascript即可轻松更改其他元素。

var _btn = document.getElementById("btn-changemode");

_btn.addEventListener("click",function(){
   var body = document.body;
   body.classList.toggle("dark-mode");
});

body.dark-mode{
background:black;
}

.dark-mode .mode-change-p{
color:white;
}

<button id="btn-changemode" type="button">Change</button>

<P class="mode-change-p">DOES CHANGE</p>
<P>DOESN'T CHANGE</p>

Answer 2

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

但是，您可以只使用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>