如何随机化div中按钮的顺序？

Question

我正在制作一个教育网站，我需要一些帮助。

我有这段代码：

    challenge1 = num1*num2;

    challenge2 = num1*2+Math.floor(Math.random() *3) + 1;;

    challenge3 = num1*num2+Math.floor(Math.random() *9) + 1;

    challenge4 = num2+Math.floor(Math.random() *9) + 1;

    makeButton(challenge1);

    makeButton(challenge2);

    makeButton(challenge3);

    makeButton(challenge4);

function makeButton(number) {

    btncount = btncount+1;

    /* create a button */

    var b = document.createElement('button');

    b.setAttribute('class', 'pure-button');

    b.setAttribute('onclick', `check(${number})`);

    b.setAttribute('id', btncount);

    b.textContent = number;

    var buttons = document.getElementById("buttons");

    buttons.appendChild(b);

}

<div id='buttons' class="pure-button-group" role="group"></div>

它有效，但很容易发现正确答案始终是第一个按钮。

有没有办法随机化这些顺序？谢谢。

Answer 1

这是关于洗牌列表。您应该首先创建一个元素数组（不将它们附加到父元素），将其洗牌，然后parent.append(...list).您可以在此处了解如何打乱列表：&nbsp;How to randomize (shuffle) a JavaScript array?

Answer 2

您可以提出一系列挑战并使用自定义比较器对该数组进行排序：&nbsp; &nbsp;challenges = [&nbsp; &nbsp; &nbsp;num1*num2,&nbsp; &nbsp; &nbsp;num1*2+Math.floor(Math.random() *3) + 1,&nbsp; &nbsp; &nbsp;num1*num2+Math.floor(Math.random() *9) + 1,&nbsp; &nbsp; &nbsp;num2+Math.floor(Math.random() *9) + 1&nbsp; &nbsp;]&nbsp; &nbsp;function randomizer () { return Math.random() > 0.5 }&nbsp; &nbsp;challenges.sort(randomizer)&nbsp; &nbsp;for (challenge of challenges) makeButton(challenge)编辑 为了获得更好的随机化效果，您可以制作一个具有随机索引的对象列表并对其进行正常排序：&nbsp; &nbsp;challenges = [&nbsp; &nbsp; &nbsp;{ challenge: num1*num2, index: Math.random() },&nbsp; &nbsp; &nbsp;{ challenge: num1*2+Math.floor(Math.random() *3) + 1, index: Math.random() },&nbsp; &nbsp; &nbsp;{ challenge: num1*num2+Math.floor(Math.random() *9) + 1, index: Math.random() },&nbsp; &nbsp; &nbsp;{ challenge: num2+Math.floor(Math.random() *9) + 1, index: Math.random() }&nbsp; &nbsp;]&nbsp; &nbsp;function compare(a,b) { return a.index == b.index ? 0 : a.index > b.index ? 1 : -1 }&nbsp; &nbsp;challenges.sort(compare)&nbsp; &nbsp;for (i in challenges) makeButton(challenges[i].challenge)

Answer 3

将“挑战”放入一个数组中并对其进行洗牌。您可以按照此答案中所述在普通 javascript 中随机播放，但我更喜欢使用rando.js 随机播放，如下所示：console.log( randoSequence(["a", "b", "c"]) );<script src="https://randojs.com/2.0.0.js"></script>将该洗牌应用到您的按钮，您将拥有：var num1 = 2;var num2 = 4;var btncount = 0;challenge1 = num1 * num2;challenge2 = num1 * 2 + Math.floor(Math.random() * 3) + 1;;challenge3 = num1 * num2 + Math.floor(Math.random() * 9) + 1;challenge4 = num2 + Math.floor(Math.random() * 9) + 1;//------------CHANGED PART------------var shuffledChallenges = randoSequence([challenge1, challenge2, challenge3, challenge4]);makeButton(shuffledChallenges[0].value);makeButton(shuffledChallenges[1].value);makeButton(shuffledChallenges[2].value);makeButton(shuffledChallenges[3].value);//--------END OF CHANGED PART.--------function makeButton(number) {&nbsp; btncount = btncount + 1;&nbsp; /* create a button */&nbsp; var b = document.createElement('button');&nbsp; b.setAttribute('class', 'pure-button');&nbsp; b.setAttribute('onclick', `check(${number})`);&nbsp; b.setAttribute('id', btncount);&nbsp; b.textContent = number;&nbsp; var buttons = document.getElementById("buttons");&nbsp; buttons.appendChild(b);}<script src="https://randojs.com/2.0.0.js"></script><div id='buttons' class="pure-button-group" role="group"></div>