Question

我正在尝试为正在上课的班级制作Cookie Clicker，由于文件document.getElementById，我一开始就跳了起来。这是我的html（相关位）。

<div id="cookiebox">
<input onclick="click()" type="image" src="images/cookie.jpg" class="cookie" />
</div>
<div id="cookieNumber"></div>

然后使用相应的javascript：

var cookies = 0;
function click() {
     cookies = cookies + 1;
     console.log(cookies);
     var test = document.getElementById("cookieNumber").innerHTML = cookies;
}

所以最终发生的事情是我得到一个类型错误，因为它找不到cookieNumber div，什么也没发生。我很清楚这是一个超级新手问题，但是如果有人可以帮助我解决这个问题，我将不胜感激。

编辑：修复了document.getElementById的问题。仍然无法从输入中触发该函数。

编辑2：修复了所有问题。谢谢@ j08691。

Answer 1

我创建了一个有效的JSFiddle。您的函数命名为j08691似乎是问题所在。

此外，您可能必须将函数更改为箭头函数，因为如果函数未定义，那么如果没有箭头函数，该函数对我不起作用。

工作版本：

<div id="cookiebox">
    <input onclick="myFunction()" type="image" src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" height=100 width=100 class="cookie" />
</div>
<div id="cookieNumber"></div>

var cookies = 0;
myFunction = () => {
     cookies = cookies + 1;
     console.log(cookies);
     var test = document.getElementById("cookieNumber").innerHTML = cookies;
}

Answer 2

尝试将您的JS代码包装在onload = function() { //your code here... }中，然后查看它是否有效。

这可确保您的div在调用getElementById之前已真正加载

遇到document.getElementById的问题

2 个答案: