Я пытался изменить цвет с JS, но он не работает - PullRequest
Новая
       0

Я пытался изменить цвет с JS, но он не работает

1 голос
/ 24 марта 2020

Я получаю сообщение об ошибке при запуске этого кода в консоли Firefox. Ошибка: TypeError: redSquare is null. Однако в codepen он работает нормально.

Я не знаю, почему это происходит. В браузере ничего не происходит. 

 /* Document Object Model */


const redSquare = document.querySelector('.red-square');
redSquare.style.color = 'limegreen';

 const elementsToChange = document.querySelectorAll('.js-target');
 for (let i = 0 ; i < elementsToChange.length; i++){
     const currentElement = elementsToChange[i];
     currentElement.innerText = "Modified by Js!";
 }
 
.red-square {
    border: 2px solid red;
    color: black;
    background-color: dodgerblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width>, initial-scale=1.0">
    <title>Part-6</title>
    <link href="../CSS3/1.css" rel="stylesheet"/>
    <script src= "../JavaScript/6.js"></script>
</head>
<body>
    <h1 class = "red-square">DOM</h1>
    <ul>
        <li class="js-target">Unchanged</li>
        <li class="js-target">Unchanged</li>
        <li>Won't Change</li>
        <li class="js-target">Unchanged</li>
    </ul>
</body>
</html>

1 Ответ

0 голосов
/ 24 марта 2020

document.querySelector('missingSelector') возвращает null

document.querySelectorAll('missingSelector') возвращает NodeList (.length = 0)

Поэтому убедитесь, что содержимое DOM загружено и готово для поиска. Оберните ваш код с помощью window.onload = function(){...your code here} или другими способами.

И будет лучше, если вы положите свой скрипт в конец <body> прямо перед </body>.

Причина в синтаксическом анализе и интерпретаторе машина, которая принимает значения переменных на первом цикле. Таким образом, переменные сначала принимают значения undefined или null. Также DOM Structure требуется некоторое время для сборки, в это время js уже работает.

Лучше потренировать сценарий, но он не дает 100% гарантии. Лучше всего переносить ваш зависящий от кода DOM в window.onload или "DOMContentLoaded" eventListener документа.

Вот почему лучше инициализировать и определить все ваши функции и константы в отдельном файле или вне основного функция (напр. window.onload). Внутри только в зависимости от DOM элементов функции и события.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...