时间戳

首页 > 解决方案 > 无法将属性设置为 null

javascript - 无法将属性设置为 null

问题描述

我有一个 HTML、CSS 和 JS 文件。除了我的控制台之外，一切都运行良好，向我显示一条消息“无法设置属性‘textContent’为空”。

我已经尝试过围绕代码，window.onload但仍然没有运气。html代码在这里

错误信息

游戏.js

var colors = [
  'rgb(255, 0, 0)',
  'rgb(255, 255, 0)',
  'rgb(0, 255, 0)',
  'rgb(0, 255, 255)',
  'rgb(0, 0, 255)',
  'rgb(255, 0, 255)'
];

var squares = document.querySelectorAll('.square');
var pickedColor = colors[3];
var display = document.getElementById('colorDisplay');
display.textContent = pickedColor;

for (var i = 0; i < squares.length; i++) {
  // ADD INITIAL COLORS TO SQUARES
  squares[i].style.backgroundColor = colors[i];

  // ADD EVENTLISTENERS TO SQUARES
  squares[i].addEventListener('click', function() {
    console.log(this.style.backgroundColor);
  });
}

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Agent Color</title>
    <link rel="stylesheet" type="text/css" href="game.css">
    <script type="text/javascript" src="game.js"></script>
</head>
<body>
<h1>The great <span id="colorDisplay">RGB</span> color game</h1>
<div id="container">
   <div class="square"></div>
   <div class="square"></div>
   <div class="square"></div>
   <div class="square"></div>
   <div class="square"></div>
   <div class="square"></div>
</div>

</body>
<script type="text/javascript" src="game.js"></script>

</html>

标签： javascripthtml

解决方案

var display=document.getElementById("colorDisplay")- 这是null因为（至少在执行时）没有 id 的元素colorDisplay。

如果您确定您的代码中有这样的元素，请确保您的 DOM 内容已经加载。

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

推荐阅读