如何在不刷新的情况下更改 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

将您的代码放入函数中并使按钮调用该函数：

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

此外，随机生成器也必须在您的函数内。

Answer 2

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

为随机文本创建按钮和容器。
捕获两个元素。
为按钮添加监听器。
当有人点击按钮时你想改变innerHtml，所以，在回调中做。
我用随机数更改了 innerHtml...这是一个正确的例子 =)
参数 evt 在那里，因为如果你想对事件做其他事情，你可以删除它。
我也送你一只兔子：
(|_/)
(#.*)
c(")(")
尽情享受吧！

如何在不刷新的情况下更改 innerHTML，或者在 javascript 中使用相同的按钮刷新并输出

How to change innerHTML without refresh or refresh and output with same button in javascript

html

javascript

jquery

innerhtml