在JavaScript中调用函数时出现JavaScript错误，而不是在HTML中调用时[重复]答案

【问题标题】：JavaScript error when function called in JavaScript, not when called in HTML [duplicate]在JavaScript中调用函数时出现JavaScript错误，而不是在HTML中调用时[重复]
【发布时间】：2017-12-12 20:45:41
【问题描述】：

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

无法设置未定义或空引用的属性“innerHTML”

我有以下代码：

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();

<!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>

我尝试将 Microsoft Edge 和 Google Chrome 作为浏览器，但没有结果。我不知道我做错了什么，所以任何帮助表示赞赏！

【问题讨论】：

你的js调用在dom准备好之前就完成了
好的，我该如何解决？

标签： javascript html

【解决方案1】：

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

要轻松解决此问题，请在<body> 标签的底部加载<script>：

<!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>

【讨论】：

虽然通常脚本在正文底部是很好的做法。

【解决方案2】：

<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>

你必须等到 dom 准备好。

也永远不要在head 中声明您的脚本，将您的脚本标签移到body 下方。

【讨论】：

出了什么问题，如何解决？
no result 是什么意思？
问题是 $ 未定义，这会阻止整个代码运行。
在这个例子中使用 jquery 是多余的
@BrentMeeusen 这是未定义的，因为您在头部有这个脚本，并且需要在正文下方。再加上我这里的文件准备功能。我更新了我的答案。

【解决方案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);

【讨论】：