时间戳

首页 > 解决方案 > Javascript随机段落交换，以任何随机顺序

javascript - Javascript随机段落交换，以任何随机顺序

问题描述

尝试使用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>

标签： javascripthtmlarraysdom

解决方案

使用 获取所有元素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>

推荐阅读