单击 html/javascript 中的按钮时如何生成新文本？

Question

我正在尝试创建一个按钮，每次单击时，都会从列表中生成一个新句子。我现在所拥有的只是在刷新页面时生成一个新句子，并且我不确定要尝试什么。我昨天才开始学习所以请对我好一点。

这是我到目前为止所拥有的。

<div>
    <button onclick="button" id="myButton">Hit me.</button>
    <p id="randomQuote"> </p>
</div>

<script>

    var quote = ["S1","S2","S3","S4",  ];

    var randomQuote = Math.floor(Math.random() * quote.length);
    document.getElementById("randomQuote").innerHTML = quote[randomQuote];

</script> 

Answer 1

您应该在

onclick

的值中提供可调用函数调用：

<div>
    <button onclick="onButtonClick()" id="myButton">Hit me.</button>
    <p id="randomQuote"> </p>
</div>

<script>

    var quote = ["S1","S2","S3","S4",  ];

    function onButtonClick() {
      var randomQuote = Math.floor(Math.random() * quote.length);
      document.getElementById("randomQuote").innerHTML = quote[randomQuote];
    }

</script> 

但推荐的方法是使用

addEventListener

:

<div>
    <button id="myButton">Hit me.</button>
    <p id="randomQuote"> </p>
</div>

<script>

    var quote = ["S1","S2","S3","S4",  ];

    document.getElementById('myButton').addEventListener('click', function() {
      var randomQuote = Math.floor(Math.random() * quote.length);
      document.getElementById("randomQuote").innerHTML = quote[randomQuote];
    });

</script>