Question

我正在尝试制作一个输出特定图像的简单的coinflip，例如在这种情况下，它是ctflip和tflip，基于它的真或假。当我按下按钮时，我希望ti运行coinFlip功能以生成数字，然后显示正确的图像。

    <!DOCTYPE html>
    <html>
    <body>
    <h1>My Web Page</h1>
    <p>My paragraph.</p>
    <p id="flipDisplay"></p>
    <button onclick="coinFlip()"+"display()">Flip the Coin!</button>
    <script>
    function coinFlip() {
    return (Math.floor(Math.random() * 2) == 0);
    }
    function display() {
    if (coinFlip()) {
        document.write('<img src="./tflip.png">');
    }
    else {document.write('<img src="./ctflip.png">');
    }
    }
    </script>
    <!--<a><img src=javacript:flip></a> -->
    </body>
    </html>

Answer 1

调用两个函数的语法不正确。只有调用display才能正常工作，因为display会调用coinflip本身。

   <!DOCTYPE html>
    <html>
    <body>
    <h1>My Web Page</h1>
    <p>My paragraph.</p>
    <p id="flipDisplay"></p>
    <button onclick="display()">Flip the Coin!</button>
    <script>
      function coinFlip() {
        return (Math.floor(Math.random() * 2) == 0);
      }
      function display() {
        if (coinFlip()) {
          document.write('<img src="./tflip.png">');
        } else {
          document.write('<img src="./ctflip.png">');
        }
      }
    </script>
    <!--<a><img src=javacript:flip></a> -->
    </body>
    </html>

调用两个函数的正确语法是onClick="first();second();"，但通常最好只调用一个根据需要调用其他函数的函数。

Answer 2

HTML：

<button onClick="handleButtonClick();">Flip Coin</button>

JS：

function handleButtonClick() {
    coinFlip();
    display();
}

根据脚本代码将HTML控件映射到单个入口点通常更简洁。因此，用户的一个逻辑动作导致功能名称清楚描述的单个逻辑功能块。使代码更简洁，可维护。

但是，在您的具体示例中，您不需要同时调用这两个函数。您已经在显示功能中调用了coinFlip功能。所以，你真正需要调用的是display（），实际上。

使用按钮显示硬币翻转Javascript的结果

2 个答案: