如何创建在 javascript 中有效的按钮？

Question

编辑： 所以一些解决方案有效。问题是，他们在 codepen.io 工作。但是，当我尝试将实际的 HTML 页面从我的计算机重新加载到 Chrome 时，按钮会点击但什么也不显示。 Chrome 说：'dice.js:12 Uncaught TypeError: Cannot set 属性 'onclick' of null 在 dice.js:12。'我该如何解决？

我查看了多个具有不同答案的类似问题，并且 none 我尝试过的答案有效。我能够使用以下代码随机掷骰子：

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

Answer 1

试试这个

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

Answer 2

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>

如何创建在 javascript 中有效的按钮？

How do you create a button that works in javascript?

javascript

button

dice

旁注：