Попытка изменить цвет элемента с JavaScript, и я получаю неопределенную ошибку - PullRequest
Новая
       5

Попытка изменить цвет элемента с JavaScript, и я получаю неопределенную ошибку

0 голосов
/ 18 апреля 2020

Извините, если это звучит глупо, но через 3 часа, пытаясь найти ответ, я в растерянности. Я только начал изучать Javascript для университетского проекта.

Итак, я пытаюсь динамически изменить цвет некоторых элементов на моей странице, используя Javascript, и хотя это работает для отдельных элементов, таких как нижний колонтитул, я получаю «Uncaught TypeError: Cannot read свойство 'style' неопределенных "в таких элементах, как р или h4. Я следовал тому, что я прочитал в этой теме: Как установить цвет H1 с помощью javascript? , но я все еще получаю ошибку. Вот мой код: 

    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 белым, даже если есть ошибка. Любая помощь будет высоко ценится.

Ответы [ 2 ]

1 голос
/ 18 апреля 2020

В вашем распоряжении опечатка для l oop: 

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>
1 голос
/ 18 апреля 2020

Быстро взглянул на ваш код, если я не ошибаюсь, ваш синтаксис l oop неверен, попробуйте заменить в обоих циклах for(let j=0; j<contentHeader.length;j++ Средний оператор в вашем для l oop неверен, он должен быть условие, которое возвращает true, в вашем случае это только попытка для i = contentHeader.length-1

...