Question

控制台中出现错误：

未捕获的TypeError：无法读取属性＆＃39; addEventListener＆＃39;为null 在（指数）：14

以下是我要分析的代码：

＆＃13;

<html>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
  <head>
    <script type="text/javascript">
    var div = document.getElementById('text'),
		randomColor = function(e) {
      var hex = Math.floor( Math.random() * 0xFFFFFF ),
          res = e.target,
          result = "#" + hex.toString(16);
      res.style.backgroundColor = result;
      res.innerHTML = result;
  	};
div.addEventListener('mouseover', randomColor);
    </script>
    <style>
      #text{
        width: 1000px;
        height: 500px;
        text-align: center;
        font-size: 50px;
        font-family: 'Quicksand';
    }
      body{
        text-align: center;
        font-family: 'Quicksand';
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
      }
     </style>
  </head>
  <body>
    <h1>Hover over me to get a random color!</h1>
    <div id="text">Hex code</div>
  </body>
</html>

＆＃13;

我不明白，因为它适用于JSFIDDLE。有人请帮忙！

Answer 1

这里是您的代码的堆栈代码，但重新安排了各种css，js和html。

在原始的单个html文件中，您应该在html之后包含您的js。

＆＃13;

var div = document.getElementById('text'),
  randomColor = function(e) {
    var hex = Math.floor(Math.random() * 0xFFFFFF),
      res = e.target,
      result = "#" + hex.toString(16);
    res.style.backgroundColor = result;
    res.innerHTML = result;
  };
div.addEventListener('mouseover', randomColor);

＆＃13;

#text {
  width: 1000px;
  height: 500px;
  text-align: center;
  font-size: 50px;
  font-family: 'Quicksand';
}
body {
  text-align: center;
  font-family: 'Quicksand';
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />

<h1>Hover over me to get a random color!</h1>
<div id="text">Hex code</div>

＆＃13;

Answer 2

在浏览器中运行代码的问题是您的脚本是head标记，因此它在DOM之前加载。在Jsfiddle中，脚本在DOM之后加载。因此，您必须在结束<body>标记之前放置脚本。

总是更好地包装代码

$(document).ready(function() {
  // Handler for .ready() called.
});

或（如建议的上层不再需要）

$(function() { ... });

如果你使用jQuery。

或者如果是纯粹的javascript

document.addEventListener("DOMContentLoaded", function(){
  // Handler when the DOM is fully loaded
});

希望它有所帮助。

编辑：添加了代码（刚刚在正文结束前放置脚本标记）

<html>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
  <head>

<style>
  #text{
    width: 1000px;
    height: 500px;
    text-align: center;
    font-size: 50px;
    font-family: 'Quicksand';
}
  body{
    text-align: center;
    font-family: 'Quicksand';
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
  }
 </style>
 </head>
  <body>
   <h1>Hover over me to get a random color!</h1>
   <div id="text">Hex code</div>
    <script type="text/javascript">
    var div = document.getElementById('text'),
    randomColor = function(e) {
    var hex = Math.floor( Math.random() * 0xFFFFFF ),
      res = e.target,
      result = "#" + hex.toString(16);
    res.style.backgroundColor = result;
    res.innerHTML = result;
  };
 div.addEventListener('mouseover', randomColor);
  </script>
  </body>
</html>

为什么我的随机颜色生成器JS代码无法在浏览器中运行

2 个答案: