TypeError：无法读取属性'innerHTML'的空

问题描述：

我想保留最佳时间值下的ID“besttime”，但我一直在Chrome中得到以下错误：无法读取showBestTime的属性'innerHTML'null 。TypeError：无法读取属性'innerHTML'的空

不知道我在做什么错，我附上了下面的代码。我正在尝试处理showBestTime函数中的最佳时间。提前致谢！

<html> 
 
    <head> 
 
     <title>Reaction tester</title> 
 
     </head> 
 
     <style type="text/css"> 
 
      #page-container{ 
 
       width: 1000px; 
 
       margin: 0 auto; 
 
       height: 800px; 
 
      } 
 
      body{ 
 
       margin: 0; 
 
       padding: 0; 
 
       font-family: Helvetica, Arial, freesans, sans-serif; 
 
      } 
 
      #shape{ 
 
       width: 200px; 
 
       height: 200px; 
 
       background-color: red; 
 
       display: none; 
 
       position: relative; 
 
      } 
 
      .time{ 
 
       font-weight: bold; 
 
      } 
 
     </style> 
 
    <body> 
 
     <div id="page-container"> 
 
      <h1>Test Your Reactions!</h1> 
 
      <p>Click on the boxes and circles as quickly as you can!</p> 
 
      <p class="time">Your time: <span id="timeTaken"></span></p> 
 
      <p class="time">Best time: <span id="bestTime">10</span>s</p> 
 
      <div id="shape"></div> 
 
     </div> 
 
     <script type="text/javascript"> 
 
      var start=new Date().getTime(); 
 
      function getRandomColor() { 
 
       var letters= "ABCDEF"; 
 
       var color= "#"; 
 
       for (var i=0; i<6; i++) { 
 
        color +=letters[Math.floor(Math.random()*16)]; 
 
       } 
 
       return color; 
 
      } 
 
      function makeShapeAppear(){ 
 
       var top=Math.random()*400; 
 
       var left=Math.random()*800; 
 
       var width=(Math.random()*400)+100; 
 
       if(Math.random()>0.5){ document.getElementById("shape").style.borderRadius="50%"; 
 
       } else{ 
 
       document.getElementById("shape").style.borderRadius="0"; 
 
       } document.getElementById("shape").style.backgroundColor=getRandomColor(); 
 
       document.getElementById("shape").style.top=top+"px"; 
 
       document.getElementById("shape").style.left=left+"px"; document.getElementById("shape").style.width=width+"px"; document.getElementById("shape").style.height=width+"px"; 
 
       document.getElementById("shape").style.display="block"; 
 
       start=new Date().getTime(); 
 
      } 
 
      function appearAfterDelay(){ 
 
       setTimeout(makeShapeAppear, (Math.random() * 2000)); 
 
      } 
 
      function showBestTime(y){ if(y<document.getElementById("besttime").innerHTML){ 
 
        document.getElementById("besttime").innerHTML=y; 
 
       } 
 
      } 
 
      appearAfterDelay(); 
 
      document.getElementById("shape").onclick=function(){ 
 
       document.getElementById("shape").style.display="none"; 
 
       var end=new Date().getTime(); 
 
       var timeTaken=(end-start)/1000; document.getElementById("timeTaken").innerHTML=timeTaken+"s"; 
 
       appearAfterDelay(); 
 
       showBestTime(timeTaken); 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

'bestTime'！='besttime' – vlaz

使用棉绒将帮助你避免这些类型的常见错误。我建议Airbnb的风格指南，不管修改什么，都可以让你更容易使用：https：//github.com/airbnb/javascript – chandlervdw

答

您在选择器中犯了拼写错误。您提供了besttime作为您的选择器，而不是bestTime。我已经添加了工作代码。

<html> 
 

 
<head> 
 
    <title>Reaction tester</title> 
 
</head> 
 
<style type="text/css"> 
 
    #page-container { 
 
     width: 1000px; 
 
     margin: 0 auto; 
 
     height: 800px; 
 
    } 
 
    
 
    body { 
 
     margin: 0; 
 
     padding: 0; 
 
     font-family: Helvetica, Arial, freesans, sans-serif; 
 
    } 
 
    
 
    #shape { 
 
     width: 200px; 
 
     height: 200px; 
 
     background-color: red; 
 
     display: none; 
 
     position: relative; 
 
    } 
 
    
 
    .time { 
 
     font-weight: bold; 
 
    } 
 
</style> 
 

 
<body> 
 
    <div id="page-container"> 
 
     <h1>Test Your Reactions!</h1> 
 
     <p>Click on the boxes and circles as quickly as you can!</p> 
 
     <p class="time">Your time: <span id="timeTaken"></span></p> 
 
     <p class="time">Best time: <span id="bestTime">10</span>s</p> 
 
     <div id="shape"></div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     var start = new Date().getTime(); 
 

 
     function getRandomColor() { 
 
      var letters = "ABCDEF"; 
 
      var color = "#"; 
 
      for (var i = 0; i < 6; i++) { 
 
       color += letters[Math.floor(Math.random() * 16)]; 
 
      } 
 
      return color; 
 
     } 
 

 
     function makeShapeAppear() { 
 
      var top = Math.random() * 400; 
 
      var left = Math.random() * 800; 
 
      var width = (Math.random() * 400) + 100; 
 
      if (Math.random() > 0.5) { 
 
       document.getElementById("shape").style.borderRadius = "50%"; 
 
      } else { 
 
       document.getElementById("shape").style.borderRadius = "0"; 
 
      } 
 
      document.getElementById("shape").style.backgroundColor = getRandomColor(); 
 
      document.getElementById("shape").style.top = top + "px"; 
 
      document.getElementById("shape").style.left = left + "px"; 
 
      document.getElementById("shape").style.width = width + "px"; 
 
      document.getElementById("shape").style.height = width + "px"; 
 
      document.getElementById("shape").style.display = "block"; 
 
      start = new Date().getTime(); 
 
     } 
 

 
     function appearAfterDelay() { 
 
      setTimeout(makeShapeAppear, (Math.random() * 2000)); 
 
     } 
 

 
     function showBestTime(y) { 
 
      if (y < document.getElementById("bestTime").innerHTML) { 
 
       document.getElementById("bestTime").innerHTML = y; 
 
      } 
 
     } 
 
     appearAfterDelay(); 
 
     document.getElementById("shape").onclick = function() { 
 
      document.getElementById("shape").style.display = "none"; 
 
      var end = new Date().getTime(); 
 
      var timeTaken = (end - start)/1000; 
 
      document.getElementById("timeTaken").innerHTML = timeTaken + "s"; 
 
      appearAfterDelay(); 
 
      showBestTime(timeTaken); 
 
     } 
 
    </script> 
 
</body> 
 

 
</html>

它的工作原理，谢谢！ –

如果是成功的，请批准我的答案。 – Nitheesh

答

你有跨度：

<span id="bestTime">

和你

document.getElementById("besttime")

和bestTime查询它不等于besttime，所以更改为：

document.getElementById("bestTime")

TypeError：无法读取属性'innerHTML'的空

相关推荐