Javascript：未捕获TypeError：无法设置null property属性'innerHTML'

我浏览过几个问题，但找不到任何帮助。顺便说一下，这是我第一次在这里问一个问题，所以我可能不会以正确的方式去做。不管怎样，下面一行是造成我的cursorPps变量已经被定义问题Javascript：未捕获TypeError：无法设置null property属性'innerHTML'

/* cursorPps defined above */ 
document.getElementById("cursorPps").innerHTML = cursorPps;

。有人能指出其他可能的东西可能导致这个错误吗？

编辑：顺便提一下，问题在于它没有更新HTML上的值，尽管变量的值发生了变化。

HTML：

<html> 

<head> 
<title>Potato Clicker</title> 
<link rel="stylesheet" type="text/css" href="interface.css"> 
</head> 

<body> 

<div id="left"> 
<img id="potato-img" onClick="potatoClick(clickPower)" src="stockvault-potatoes107220.jpg" width="300" height="300"> 
<br> 
<div id="mainDisplay"> 
<span id="potatoes">0</span> <br> potatoes 
<br> 
<br> 
Producing <span id="pps">0</span> potatoes per second 
<br> 
</div> 
Cursors: <span id="cursors">0</span> 
</div> 

<div id="middle"> 
<div id="buildings" onClick="buyCursor()"> &nbsp; Buy Cursor &nbsp; </div> 
</div> 


<script src="main.js"></script> 
</body> 

</html>

的Javascript：

//variables 

var potatoes = 0; //potatoes 
var clickPower = 1; //potatoes gained per click 
var pps = 0;  //potatoes per second 
var cursors = 0; //cursors 
var cursorCost;  //cost of cursor 
var cursorPps = 0; //total cursor potatoes per second 
var cursorBuy;  //cursor buy button 


//functions 

function potatoClick(number) { 

potatoes = potatoes + number; 
document.getElementById("potatoes").innerHTML = potatoes; 

} 

function buyCursor() { 

var cursorCost = Math.floor(10 * Math.pow(1.2,cursors)); 
if (potatoes >= cursorCost) { 
pps = pps - cursorPps; 
cursors = cursors + 1; 
potatoes = potatoes - cursorCost; 
cursorPps = cursorPps + 1; 
pps = pps + cursorPps; 
document.getElementById("potatoes").innerHTML = potatoes; 
document.getElementById("cursors").innerHTML = cursors; 
document.getElementById("cursorPps").innerHTML = cursorPps; 
document.getElementById("pps").innerHTML = pps; 
} 
else { 
alert("Not enough potatoes!") 
} 
var nextCost = Math.floor(100 * Math.pow(1.2,cursors));  
document.getElementById('cursorCost').innerHTML = nextCost; 
} 

window.setInterval(function() { 

if (pps > 0) { 

potatoClick(pps); 

} 

}, 1000);

来源

2013-12-18 Tan WS

你有没有在你的DOM的''cursorPps'的id'一个元素？这将是区分大小写的。 –

请与我们分享HTML代码。 – GLES

要么你没有元素的id为“cursorPps”，要么在元素呈现给页面之前试图读取元素。大量重复，懒得找。回答，使用onload或文档就绪，或将脚本放在页面的底部，而不是放在头部。 – epascarello

确保

你有一个元素都有一个ID
的元素是Java脚本之前在页面上正在运行
您在JS的执行绑定到一个事件（从以前的后续行动）的元素之后发生的页面
的cursorPps变量已填充

这里有一个简单的codepen演示的方式上做http://codepen.io/leopic/pen/wDtIB

来源

2013-12-18 13:55:01 leopic

对不起，我是一个noob嗯，你是什么意思的第三和第四点？ –

您的第三点不是问题，因为代码是针对点击事件运行的。我不知道第四点你会得到什么。 –

<div id="myDiv"></div>

You have an element with that ID

var length = document.querySelectorAll('#myDiv').length; 
if(length > 0) { 
    // This element exists in the DOM tree 
}

You bind the execution of your JS to an event (follow-up from previous) that happens after the element is on the page

<body> 
    <div id="myDiv"></div> 
    <script> 
     var length = document.querySelectorAll('#myDiv').length; 
     console.log(length); 
    </script> 
</body>

The cursorPps variable has been populated
```
if(cursorPps != undefined) 
```

来源

2013-12-18 14:08:09 GLES

Javascript：未捕获TypeError：无法设置null property属性'innerHTML'

回答

相关问题