Question

尝试使用 JavaScript 更改元素的颜色并收到未定义的错误

2020-04-17

183

javascript css dom-events

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

因此，我尝试使用 Javascript 动态更改页面中某些元素的颜色，虽然这适用于页脚等单个元素，但在 p 或 h4 等元素中，我收到“未捕获 TypeError：无法读取未定义的属性‘style’”。我按照我在这个帖子上读到的内容进行操作：如何使用 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 变成白色。任何帮助都将不胜感激。

Answer 1

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

Answer 2

您的 for 循环中有一个拼写错误：

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; j < contentHeader.length-1; j++){
          contentHeader[j].style.color = "#ffffff";
        }
    
        for(let i=0; i < paragraph.length-1; i++){
          paragraph[i].style.color = "#e6e6e6";
        }
      }
    
    });

<button id="lighting_button">Dark Mode</button>
<h4>Title 1 </h4>
<h4>Title 2 </h4>
<h4>Title 3 </h4>
<h4>Title 4 </h4>
<h4>Title 5 </h4>
<div id="footer">Footer</div>