Question

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

Answer 1

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

Answer 2

好吧，如果我没搞错的话，您想要做的只是swap个div的值。您的代码完美无缺，您仅错过了1，请注意：-

您正在做Math.floor(Math.random() * lists.length)，而不是lists[Math.floor(Math.random() * lists.length)]部分的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)];

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

JavaScript随机段落以任意随机顺序交换

2 个答案: