Question

我有一个HTML，CSS和JS文件。除了控制台之外，其他所有设备都正常运行，并显示一条消息“无法将属性'textContent'设置为null”。

我已经尝试用window.onload围绕代码，但是仍然没有运气。 html code here

game.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>

Answer 1

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

如果您确定代码中包含此类元素，请确保已加载DOM Content。

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

Answer 2

确保DOM中存在一个具有id colorDisplay的元素，并且在js代码运行时准备就绪。例如，将js放在主体容器的末尾以确保DOM已准备就绪。

无法将属性设置为null

2 个答案: