在JavaScript中调用函数时出现JavaScript错误，而不是在HTML中调用时[重复]
Posted
技术标签:
【中文标题】在JavaScript中调用函数时出现JavaScript错误，而不是在HTML中调用时[重复]【英文标题】：JavaScript error when function called in JavaScript, not when called in HTML [duplicate] 【发布时间】：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准备好之前就完成了 好的，我该如何解决？ 【参考方案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);
【讨论】：
以上是关于在JavaScript中调用函数时出现JavaScript错误，而不是在HTML中调用时[重复]的主要内容，如果未能解决你的问题，请参考以下文章
在 Word Javascript API 中调用 context.application.createDocument 时出现 GeneralException
在cordova android应用程序中从javascript调用新的PayPalPaymentDetails（）时出现java错误
在组件中导入 javascript 文件并在多个页面上使用时出现 Blazor JSRuntime 问题