EDIT：因此，一些解决方案起作用。事实是，它们在codepen.io中工作。但是，当我尝试将实际的HTML页面从计算机重新加载到Chrome时，该按钮会单击并没有显示任何内容。 Chrome在说：'dice.js：12 Uncaught TypeError：无法将属性'onclick'设置为null在dice.js：12。”我该如何解决？
我看过多个具有不同答案的类似问题，但我尝试过的所有答案均无济于事。我可以使用以下代码随机掷骰子：
const min = 1;
const max = 7;
function diceRoll(random) {
random = 0;
while (random <= 0) {
random = Math.floor(Math.random() * (max - min) + min);
document.write('Dice # ' + random);
}
}
我的html是：
<button id="roll">Throw Dice</button>
我还没有学会如何使按钮正常工作，或者如何启动javascript（除了在控制台中编写它。任何人都可以帮助创建按钮使其正常工作，所以我不必使用控制台？请参阅下面的说明：
let button = document.getElementById('roll');
button.onclick = function() {
let result = diceRoll();
printNumber(result);
};
另一种尝试：
document.getElementById("roll").onclick = diceRoll();
还有另一个：
document.getElementById("roll").onclick = function() {
diceRoll();
};
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<script>
const min = 1;
const max = 7;
function diceRoll(random) {
random = 0;
while (random <= 0) {
random = Math.floor(Math.random() * (max - min) + min);
document.write('Dice # ' + random);
}
}
</script>
</head>
<body>
<form onsubmit='diceRoll()'>
<button>Throw Dice</button>
</form>
</body>
</html>Codepen将脚本after放入html，因此页面在到达脚本时就已加载。这很重要，因为如果脚本中显示document.getElementById('roll')但页面尚未加载，则该元素尚不存在，并且您将没有任何要引用的内容-因此，您将获得null。不好我敢打赌，当您创建本地文件时，您不会执行Codepen所做的相同操作。您可能正在这样做：
<html>
<head>
<script>
const min = 1;
const max = 7;
function diceRoll() {
let random = 0;
while (random <= 0) {
random = Math.floor(Math.random() * (max - min) + min);
document.write('Dice # ' + random);
}
}
let button = document.getElementById('roll');
button.onclick = function() {
diceRoll();
};
</script>
</head>
<body>
<button id="roll">Throw Dice</button>
</body>
</html>
什么时候应该这样做：
<html>
<head>
<script>
const min = 1;
const max = 7;
function diceRoll() {
let random = 0;
while (random <= 0) {
random = Math.floor(Math.random() * (max - min) + min);
document.write('Dice # ' + random);
}
}
</script>
</head>
<body>
<button id="roll">Throw Dice</button>
<script>
let button = document.getElementById('roll');
button.onclick = function() {
diceRoll();
};
</script>
</body>
</html>
或此：
<html>
<head>
<script>
const min = 1;
const max = 7;
function diceRoll() {
let random = 0;
while (random <= 0) {
random = Math.floor(Math.random() * (max - min) + min);
document.write('Dice # ' + random);
}
}
window.addEventListener('load', (event) => {
document.getElementById('roll').onclick = diceRoll;
});
</script>
</head>
<body>
<button id="roll">Throw Dice</button>
</body>
</html>
甚至是这个：
<html>
<head>
<script>
const min = 1;
const max = 7;
function diceRoll() {
let random = 0;
while (random <= 0) {
random = Math.floor(Math.random() * (max - min) + min);
document.write('Dice # ' + random);
}
}
</script>
</head>
<body>
<button id="roll" onclick="diceRoll();">Throw Dice</button>
</body>
</html>
信不信由你，我还没有列出更多的方法来实现这一目标。重要的是，它们全部在尝试使用JavaScript捕获元素之前，先将要引用的元素放在页面中]。只需选择最喜欢的做事风格，然后继续做就可以了。
我看到您还希望有一种方法可以将按钮保留在页面上。 document.write清除页面，但是您可以编写自己的输出函数，将自定义消息添加到页面上div的innerHTML上，如下所示：
<html>
<head>
<script>
const min = 1;
const max = 7;
function diceRoll() {
let random = 0;
while (random <= 0) {
random = Math.floor(Math.random() * (max - min) + min);
output('Dice # ' + random);
}
}
function output(message) {
document.getElementById("output").innerHTML += message + "<br/><br/>";
}
</script>
</head>
<body>
<button id="roll" onclick="diceRoll();">Throw Dice</button>
<div id="output"></div>
</body>
</html>并且作为额外的奖励技巧，使用名为randojs的工具，您可以像这样简单地完成所有操作：
<html>
<head>
<script src="https://randojs.com/1.0.0.js"></script>
</head>
<body>
<button id="roll" onclick="document.getElementById('output').innerHTML += 'Dice # ' + rando(1, 6) + '<br/><br/>';">Throw Dice</button>
<div id="output"></div>
</body>
</html>