Случайные абзацы Javascript меняются местами в произвольном порядке - PullRequest
Новая
       5

Случайные абзацы Javascript меняются местами в произвольном порядке

2 голосов
/ 14 марта 2019

Попытка поменять абзацы в произвольном порядке нажатием кнопки, используя 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>

Ответы [ 2 ]

1 голос
/ 14 марта 2019

Получите все свои элементы с помощью 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>
0 голосов
/ 14 марта 2019

Ну, если я правильно понял, все, что вам нужно, это 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...