Javascript随机段落交换，以任意随机顺序
Javascript随机段落交换，以任意随机顺序
提问于 2019-03-14 22:00:58
尝试使用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
Stack Overflow用户
发布于 2019-03-14 22:09:27
使用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>
Stack Overflow用户
发布于 2019-03-14 22:08:46
好吧，如果我没弄错的话，你想要的就是swap那些div的值。你的代码非常好，你错过了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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55164468
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号