Javascript random paragraphs swap, in any random order
Question
Trying to swap the paragraphs at any random order with a button click using javascript, tried putting the paragraphs in an array and making a swap function.. Please let me know if I'm missing anything (My first post ever!)
<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 answers
solution1
1 2019-03-14 14:09:26
Get all your elements with querySelectorAll and transform it into an array of elements with Array#from .
To retrieve and delete an element from the list use Array#splice
Only when the user clicks do you actually get the paragraphs and put them into the list.
Then for each element, you set a random paragraph to it and then you remove that paragraph from the list.
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>
solution2
0 2019-03-14 14:08:46
Well, If I get it correctly, all you want is to swap the value of those div s. Your code is perfectly fine, you missed just 1 thing, pay attention:-
you are doing Math.floor(Math.random() * lists.length) instead of lists[Math.floor(Math.random() * lists.length)] in if (swapped == false) { section
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.