Javascript随机段落交换，以任何随机顺序答案

【问题标题】：Javascript random paragraphs swap, in any random orderJavascript随机段落交换，以任何随机顺序
【发布时间】：2019-08-05 11:06:35
【问题描述】：

尝试使用javascript单击按钮以任何随机顺序交换段落，尝试将段落放入数组并创建交换函数。如果我遗漏任何内容，请告诉我（我的第一篇文章！）

<html>
 <head>
    <title>Swap Paragraphs At Random</title>
 <script>

    window.onload = function () {
    var x = document.getElementById('p1').innerHTML;
    var y = document.getElementById('p2').innerHTML;
    var z = document.getElementById('p3').innerHTML;
    var lists = [x,y,z];
    var swapped = false;

    document.getElementById('trigger').onclick = function swap() {

        if (swapped == false) {
            document.getElementById('p1').innerHTML = Math.floor(Math.random() * lists.length);
            document.getElementById('p2').innerHTML = Math.floor(Math.random() * lists.length);
            swapped = true;
            return swapped;


        } else {
            document.getElementById('p1').innerHTML = "" + x;
            document.getElementById('p2').innerHTML = "" + y;
            swapped = false;
            return swapped;
        }
    }
}
</script>
</head>
<body>
<div id="p1">Loren sump dolor sit mate, sumo unique argument um no. </div><br>

<div id="p2"> Id mes mover elect ram assertion has no. </div><br>

<div id="p3">Ea augur diam usu, nosier arum est an. </div><br>

<button id="trigger" onlick="swap()">Click</button>
</body>
</html>

【问题讨论】：

什么不起作用？您需要说明问题出在哪里，以便我们提供帮助
那里有问题吗？
快速浏览一下，首先你只是将“交换”的段落分配给你生成的随机数，这样它们就变成了一个数字而不是你的文本。您甚至对第三段也不做任何事情。
绑定（将事件与函数关联）未正确完成。我的意思是，当您已经在脚本中绑定了事件时，将 onclick 属性添加到 html 元素是多余的。这可能会导致每次点击都会触发该功能两次。但不是在这种情况下，因为你也打错了 onclick (onlick)
另外，' "" + x ' 表达式与 ' x ' 相同

标签： javascript html arrays dom

【解决方案1】：

好吧，如果我没记错的话，你想要的只是swap 那些divs 的值。你的代码很好，你错过了1的东西，注意：-

您在 if (swapped == false) { 部分中使用 Math.floor(Math.random() * lists.length) 而不是 lists[Math.floor(Math.random() * lists.length)]

document.getElementById('p1').innerHTML = lists[Math.floor(Math.random() * lists.length)];
document.getElementById('p2').innerHTML = lists[Math.floor(Math.random() * lists.length)];

<html>
 <head>
    <title>Swap Paragraphs At Random</title>
 <script>

    window.onload = function () {
    var x = document.getElementById('p1').innerHTML;
    var y = document.getElementById('p2').innerHTML;
    var z = document.getElementById('p3').innerHTML;
    var lists = [x,y,z];
    var swapped = false;

    document.getElementById('trigger').onclick = function swap() {

        if (swapped == false) {
            document.getElementById('p1').innerHTML = lists[Math.floor(Math.random() * lists.length)];
            document.getElementById('p2').innerHTML = lists[Math.floor(Math.random() * lists.length)];
            swapped = true;
            return swapped;


        } else {
            document.getElementById('p1').innerHTML = "" + x;
            document.getElementById('p2').innerHTML = "" + y;
            swapped = false;
            return swapped;
        }
    }
}
</script>
</head>
<body>
<div id="p1">Loren sump dolor sit mate, sumo unique argument um no. </div><br>

<div id="p2"> Id mes mover elect ram assertion has no. </div><br>

<div id="p3">Ea augur diam usu, nosier arum est an. </div><br>

<button id="trigger">Click</button>
</body>
</html>

【讨论】：

【解决方案2】：

使用querySelectorAll 获取所有元素，并使用Array#from 将其转换为元素数组。

要从列表中检索和删除元素，请使用Array#splice

只有当用户点击时，你才能真正得到段落并将它们放入列表中。
然后为每个元素设置一个随机段落，然后从列表中删除该段落。

window.onload = function() {
  const elements = Array.from(document.querySelectorAll('.container > div'));

  document.getElementById('trigger').onclick = function swap() {

      const list = elements.map(ele=>ele.innerHTML);
      
      elements.forEach(ele=>{
        const index = Math.floor(Math.random() * list.length);
        ele.innerHTML = list.splice(index, 1)
      });

  }
}

<div class="container">
  <div>Loren sump dolor sit mate, sumo unique argument um no. </div>

  <div> Id mes mover elect ram assertion has no. </div>

  <div>Ea augur diam usu, nosier arum est an. </div>
</div>

<button id="trigger" onlick="swap()">Click</button>

【讨论】：

@MaheerAli 是的，这很正常。 Sometiems Math.random 返回与段落当前位置相同的索引。
我知道，但我认为应该解决这个问题