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

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

本文关键字：刷新 javascript 按钮 输出 情况下 innerHTML      更新时间：2023-09-26

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

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>

<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. 享受吧

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

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

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

相关文章：