如何在不刷新的情况下更改innerHTML或使用JavaScript中的相同按钮进行刷新和输出

Question

我正在尝试创建一个带有单词的随机短语生成器。 我的问题是要获取一个新短语，我必须先刷新页面，然后才能创建一个新短语。 我希望它生成短语而不刷新整个页面，或者至少使用相同的按钮生成和刷新，这是我的代码。

var output = "hai " + randomBodyPart + " come un "  + randomWord + " " + randomAdjective + "!";

//Pagereloder
            function myFunction() {
                location.reload();
            }

//Genretor Button
          var button = document.querySelector("button");
          button.addEventListener("click", function() {
                (document.getElementById("viewer").innerHTML= output);
          });

这是HTML

<article>
                <header>
                    <h1>Random word Genretor</h1>
                    <p class="gen-button"><button class="btn">Click me</button><button class="btn" onclick="myFunction()">Relod</button></p>
                    <h2 id="viewer">Here</h2>
                </header>

Answer 1

<button id="myButton">Click to change the number</button>
<span id="randomNumber"></span>
<script type="text/javascript">
    (function(d) {
        var button = d.getElementById("myButton");
        var textNumber = d.getElementById("randomNumber");
        button.addEventListener("click", function(evt) {
            textNumber.innerHTML = _randomNumber();
        });

        var _randomNumber = function() {
            return Math.floor((Math.random() * 10) + 1);
        }
    })(document);
</script>

1. 创建按钮和随机文本的容器。
2. 捕获两个元素。
3. 将侦听器添加到按钮。
4. 当有人单击您要更改innerHtml的按钮时，请在回调中进行操作。
5. 我用随机数更改了innerHtml ...它是一个示例权利=）
6. 该参数在那里存在，因为如果您想对该事件进行其他操作，则可以删除该事件。
7. 我也给你一个兔子：
8. （| _ /）
9. （＃。*）
10. C（”）（”）
11. 请享用！

Answer 2

将您的代码放入一个函数中，并通过按钮调用该函数：

            function myFunction() {
                var output = "hai " + randomBodyPart + " come un "  + randomWord + " " + randomAdjective + "!";
                document.getElementById("viewer").innerHTML= output
            }

//Genretor Button
          var button = document.querySelector("button");
          button.addEventListener("click", function() {
                myFunction();
          }); 

同样，随机生成器也必须在您的函数内部。