时间戳

首页 > 解决方案 > 尝试使用 JavaScript 更改元素的颜色，但出现未定义错误

javascript - 尝试使用 JavaScript 更改元素的颜色，但出现未定义错误

问题描述

如果这听起来很愚蠢，我很抱歉，但在 3 小时试图找到答案后，我不知所措。我刚开始为一个大学项目学习 Javascript。

因此，我尝试使用 Javascript 动态更改页面中某些元素的颜色，虽然这适用于页脚等唯一元素，但在 p 等元素中出现“未捕获的类型错误：无法读取未定义的属性'样式'”或h4。我按照我在这个线程上阅读的内容：如何使用 javascript 设置 H1 的颜色？ 但我仍然收到错误消息。这是我的代码：

    const lightButton = document.getElementById("lighting_button");
console.log(lightButton);
const paragraph = document.querySelectorAll("p");
//console.log(p);

//console.log(contentHeader);
const bodyOfFile = document.body;

lightButton.addEventListener('click', (e) => {
  if(lightButton.textContent === "Dark Mode"){
    document.body.style.backgroundColor = "#1a1a1a";

    document.querySelector('#footer').style.color = "#e6e6e6";

    const contentHeader = document.querySelectorAll("h4");

    for(let j=0; contentHeader.length-1; j++){
      contentHeader[j].style.color = "#ffffff";
    }

    for(let i=0; paragraph.length-1; i++){
      paragraph[i].style.color = "#e6e6e6";
    }
  }

});

最奇怪的是，即使出现错误，它也确实使我的 h4 变白。任何帮助将非常感激。

标签： javascriptcssdom-events

解决方案

快速浏览了您的代码，如果我没记错的话，您的循环语法不正确尝试在两个循环中替换 for(let j=0; j<contentHeader.length;j++ for 循环中的中间语句不正确，它应该是一个返回 true 的条件，在您的情况下，它只是在尝试对于 i=contentHeader.length-1

推荐阅读