如何创建一个可以在 javascript 中工作的按钮？
编辑： 因此，一些解决方案有效。问题是，它们在 codepen.io 中有效。但是，当我尝试将实际的 HTML 页面从我的计算机重新加载到 Chrome 时，按钮会单击但什么也不显示。Chrome 显示：“dice.js:12 未捕获的 TypeError：无法在 dice.js:12 上设置 null 的属性“onclick”。我该如何解决这个问题？
我查看了多个有不同答案的类似问题，我尝试过的所有答案都没有奏效。我能够使用以下代码进行随机掷骰子：
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 将脚本放在 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>