时间戳

首页 > 解决方案 > 我试图用 JS 改变颜色但它不起作用

javascript - 我试图用 JS 改变颜色但它不起作用

问题描述

在 Firefox 控制台中运行此代码时出现错误。错误：TypeError：redSquare 为 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>

标签： javascripthtmlcss

解决方案

document.querySelector('missingSelector')返回null

document.querySelectorAll('missingSelector')返回NodeList(.length = 0)

因此，请确保 DOM 内容已加载并可供查找。window.onload = function(){...your code here}用或其他方式包装您的代码。

如果你把你的脚本放在<body>直接之前的底部会更好</body>。

原因是解析和解释器机器在第一个循环中获取变量的值。所以变量取值undefined或null首先。DOM结构也需要一些时间来构建，那时js已经在工作了。

将脚本放在底部的更好做法，但它不能提供 100% 的保证。将依赖的 DOM 代码包装到文档window.onload或"DOMContentLoaded"eventListener 的最佳实践。

这就是为什么最好在单独的文件或主函数之外（例如 window.onload）初始化和定义所有函数和常量。里面唯一依赖于 DOM 元素的函数和事件。

推荐阅读