Javascript 如何随机化按钮的内容(或位置)

Javascript 如何随机化按钮的内容(或位置),javascript,jquery,Javascript,Jquery,我正在尝试建立一个简单的网站学习游戏来教孩子们关于副词的知识 它只有一个带有空白单词的句子和三个包含三个可能单词的按钮。一个是副词,另外两个不是。我已经创建了一些数组来包含句子和单词的变体,但是副词总是出现在同一个按钮中,我想改变它 <html lang="en"> <head> <title>Adverb Kings</title> </head> <body> <

我正在尝试建立一个简单的网站学习游戏来教孩子们关于副词的知识

它只有一个带有空白单词的句子和三个包含三个可能单词的按钮。一个是副词,另外两个不是。我已经创建了一些数组来包含句子和单词的变体,但是副词总是出现在同一个按钮中,我想改变它

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


副词国王
副词国王
在这里放一个

变式句; 句子=[“人们对新的游戏选项发疯了”,“那个人把手放在书桌把手上”,“他为他的学校帐户输入了新密码”]; var el=document.getElementById('句子'); el.textContent=句子[Math.floor(Math.random()*句长)]; 变式副词; 副词=[“缓慢”,“快速”,“疯狂]; var el=document.getElementById(‘副词’); el.textContent=副词[Math.floor(Math.random()*副词.length)]; 变量1; 其他1=[‘汉堡’、‘疯狂’、‘丑陋’]; var el=document.getElementById('other1'); el.textContent=other1[Math.floor(Math.random()*other1.length)]; 变量2; 其他2=[‘副词’、‘拳头’、‘枪’]; var el=document.getElementById('other2'); el.textContent=other2[Math.floor(Math.random()*other2.length)]; $(“#获胜者”)。单击(函数(){ 警惕(“祝贺你!你是个天才”); }); $(“.loser”)。单击(函数(){ 警惕(“同情!你是个傻瓜”); });
这是因为按钮的位置总是按相同的顺序排列

我对你的脚本做了一些编辑。看看这个


副词国王
副词国王
变式句;
句子=[“人们对新的游戏选项发疯了”,“那个人把手放在书桌把手上”,“他为他的学校帐户输入了新密码”];
var el=document.getElementById('句子');
el.textContent=句子[Math.floor(Math.random()*句长)];
风险值顺序=[0,1,2];
洗牌(命令);
var buttons=document.getElementsByTagName(“按钮”);
按钮[orders[0]].setAttribute(“id”、“winner”);
按钮[订单[1]].classList.add(“失败者”);
按钮[订单[2]].classList.add(“失败者”);
变量副词=[“缓慢”、“快速”、“疯狂”];
按钮[orders[0]].textContent=副词[Math.floor(Math.random()*副词.length)];
变量other1=[“汉堡”、“疯狂”、“丑陋”];
按钮[orders[1]].textContent=other1[Math.floor(Math.random()*other1.length)];
变量other2=[‘副词’、‘拳头’、‘枪’];
按钮[orders[2]].textContent=other2[Math.floor(Math.random()*other2.length)];
$(“#获胜者”)。单击(函数(){
警惕(“祝贺你!你是个天才”);
});
$(“.loser”)。单击(函数(){
警惕(“同情!你是个傻瓜”);
});
函数洗牌(数组){
array.sort(()=>Math.random()-0.5);
}

嘿。你介意我问一个关于你的代码的问题来加深我的理解吗。你能解释一下“洗牌(命令);”是怎么回事吗函数shuffle(array){array.sort(()=>Math.random()-0.5);}'一起工作以获得最终结果?我理解“Math.random()-0.5”部分