如何随机化按钮的内容（或位置）

Question

I'm trying to build a simple website learning game to teach children about adverbs.我正在尝试构建一个简单的网站学习游戏来教孩子们关于副词的知识。

It just has a sentence with a blanked out word, and 3 buttons containing three possible words.它只有一个带有空白单词的句子，以及包含三个可能单词的 3 个按钮。 I One is an adverb the other two aren't. I 一个是副词，另外两个不是。 I have created some arrays to contain variations of sentences and words, however the adverb always appears in the same button, and I would like to vary it.我创建了一些 arrays 来包含句子和单词的变体，但是副词总是出现在同一个按钮中，我想改变它。

<html lang="en">
  <head>
    <title>Adverb Kings</title>
  </head>
  <body>
      <h1>Adverb Kings</h1>
      
      <div id="sentence"><p>Place an _____ here</p>
          
</div>
      
<div>
          <button type="button" class="btn btn-primary loser"><span id="other1"></span></button>
          <button type="button" class="btn btn-primary" id="winner"><span id="adverbs"></span></button>
          <button type="button" class="btn btn-primary loser"><span id="other2"></span></button>
          
          </div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script>
      
          var sentence;
sentence = ['The people _______ went crazy about the new game options', 'The man _______ slipped his hands around his desk handle', 'He _______ typed a new password for his school account'];

var el = document.getElementById('sentence');
el.textContent = sentence[Math.floor(Math.random() * sentence.length)];


var adverbs;
adverbs = ['slowly', 'quickly', 'insanely'];

var el = document.getElementById('adverbs');
el.textContent = adverbs[Math.floor(Math.random() * adverbs.length)];

var other1;
other1 = ['burger', 'insane', 'ugly'];

var el = document.getElementById('other1');
el.textContent = other1[Math.floor(Math.random() * other1.length)];

var other2;
other2 = ['adverb', 'fist', 'gun'];

var el = document.getElementById('other2');
el.textContent = other2[Math.floor(Math.random() * other2.length)];

$("#winner").click(function() {
                
                alert("congratulations! You are a genius");
                
            });

$(".loser").click(function() {
                
                alert("Commiserations! You are a fool");
                
            });
      
      </script>
        </body>
</html>

Answer 1

That's because the position of your buttons are always in same order.那是因为您的按钮的 position 始终处于相同的顺序。

I edited your script a bit.我稍微编辑了你的脚本。 Check this.检查这个。

 <html lang="en"> <head> <title>Adverb Kings</title> </head> <body> <h1>Adverb Kings</h1> <div id="sentence"></div> <div> <button type="button" class="btn btn-primary"></button> <button type="button" class="btn btn-primary"></button> <button type="button" class="btn btn-primary"></button> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script> var sentence; sentence = ['The people _______ went crazy about the new game options', 'The man _______ slipped his hands around his desk handle', 'He _______ typed a new password for his school account']; var el = document.getElementById('sentence'); el.textContent = sentence[Math.floor(Math.random() * sentence.length)]; var orders = [0, 1, 2]; shuffle(orders); var buttons = document.getElementsByTagName("button"); buttons[orders[0]].setAttribute("id", "winner"); buttons[orders[1]].classList.add("loser"); buttons[orders[2]].classList.add("loser"); var adverbs = ['slowly', 'quickly', 'insanely']; buttons[orders[0]].textContent = adverbs[Math.floor(Math.random() * adverbs.length)]; var other1 = ['burger', 'insane', 'ugly']; buttons[orders[1]].textContent = other1[Math.floor(Math.random() * other1.length)]; var other2 = ['adverb', 'fist', 'gun']; buttons[orders[2]].textContent = other2[Math.floor(Math.random() * other2.length)]; $("#winner").click(function() { alert("congratulations; You are a genius"); }). $(".loser");click(function() { alert("Commiserations; You are a fool"). }). function shuffle(array) { array.sort(() => Math;random() - 0.5); } </script> </body> </html>

如何随机化按钮的内容（或位置）

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-28 15:48:52

如何随机化按钮的内容（或位置）

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-28 15:48:52

解决方案1
1 已采纳 2020-11-28 15:48:52