Question

我知道我有一个函数可以随机化不同语言的问候语。最初，我只是想在每次刷新到随机问候语之后让页面顶部的问候语发生变化，但是当我点击从该功能创建的文本时，我试图这样做，它是一个运行该功能的按钮再次，新输出成为按钮标签，您可以一直单击以获取新值（新按钮标签）。

<head>
  <script class="astext" id="doSmth">
    //Random greeting script
    function greetingbutton() {

        var greetings = ["Ciao!", "Hola!", "Howdy Partner!", "こんにちは！", "Take me to your leader!", "Bonjour!", "Здравствуйте!", "السلام عليكم"];

        var random_greet = Math.floor(Math.random() * 8);

        var leader = greetings[random_greet];

        var buto = document.getElementById("button").innerHTML = leader;

    }

</script>
<style>
    .astext {
        background: none;
        border: none;
        margin: 0;
        padding: 0;
    }

</style>

<div class="container h1 text-center">
    <button onclick="greetingbutton()" class="astext" id="doSmth">
    <script>
       document.write(buto);
        </script>
    </button>
    <h1 id="button"></h1>

</div>

这是一种复活节彩蛋，解释了class =“astext”。

Answer 1

如果可以使用jQuery，请在greetingbutton()定义后添加以下语句：

$(document).ready(function()
{
    greetingbutton();
});

或者只是添加对该函数的调用：

greetingbutton();

Answer 2

将您的功能更改为：

$('.astext').on('click',function() {
   var $btn = $(this);
   var greetings = ["Ciao!", "Hola!", "Howdy Partner!", "こんにちは！", "Take me to your leader!", "Bonjour!", "Здравствуйте!", "السلام عليكم"];

    var random_greet = Math.floor(Math.random() * 8);

    var leader = greetings[random_greet];
    $btn.html(leader);
});

，您的HTML将只是：

<div class="container h1 text-center">
    <button class="astext" id="doSmth">/button>
    <h1 id="button"></h1>
</div>

每次单击后，使按钮文本成为函数的输出

2 个答案: