Question

所以我有一个想法让计算机用JavaScript作为代码语言来猜测数字。我确切地知道它必须做什么，但它并没有这样做。当你打开网页时，想法是（看它是否有效）获得1到100之间的随机数。奇怪的是，如果我在同一个JavaScript文件中调用该函数会产生错误，但如果我用HTML按钮调用该函数，它的工作就完全正常了！ F12控制台出现以下错误：

无法设置属性＆inner;内部HTML＆＃39;未定义或空引用

我有以下代码：

＆＃13;

var guessTheNumber = function() {

// var number = prompt("Tell me a number between 1 and 100.");
var x = document.getElementById("JS1");

x.innerHTML = Math.floor((Math.random() * 100) + 1);
}


guessTheNumber();

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>JS test</title>

	<script type="text/javascript" src="JavaScript.js"></script>
</head>
<body>
	<button onclick="guessTheNumber()"></button>
	<p class="test">test</p>
	<p id="JS1"></p>
</body>
</html>

＆＃13;

我尝试使用Microsoft Edge和Google Chrome作为浏览器，没有结果。我不知道我做错了什么，所以感谢任何帮助！

Answer 1

问题是javascript文件是 BEFORE 加载的，因此document.getElementById("JS1");将是未定义的。

要轻松解决此问题，请将<script>加载到<body>代码的底部：

<!DOCTYPE html>
<html>
<head>
    <title>JS test</title>


</head>
<body>
    <button onclick="guessTheNumber()"></button>
    <p class="test">test</p>
    <p id="JS1"></p>

<script type="text/javascript" src="JavaScript.js"></script>
</body>
</html>

Answer 2

IdService

你必须等到dom准备好了。

也永远不要在Retrofit移动您的脚本标记<script> // self executing function here var guessTheNumber = function() { // var number = prompt("Tell me a number between 1 and 100."); var x = document.getElementById("JS1"); x.innerHTML = Math.floor((Math.random() * 100) + 1); } (function() { // your page initialization code here // the DOM will be available here guessTheNumber(); })(); </script>下面声明您的脚本。

Answer 3

尝试这样（没有jQuery）：

var guessTheNumber = function() {

    // var number = prompt("Tell me a number between 1 and 100.");
    var x = document.getElementById("JS1");

    x.innerHTML = Math.floor((Math.random() * 100) + 1);
}
document.addEventListener('DOMContentLoaded', function(){ 
    guessTheNumber();
}, false);

在JavaScript中调用函数时出现JavaScript错误，而不是在HTML中调用时

3 个答案: