Javascript随机段落交换，以任何随机顺序
Posted
技术标签:
【中文标题】Javascript随机段落交换，以任何随机顺序【英文标题】：Javascript random paragraphs swap, in any random order 【发布时间】：2019-08-05 11:06:35 【问题描述】：尝试使用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>
【问题讨论】：
什么不起作用？您需要说明问题出在哪里，以便我们提供帮助 那里有问题吗？ 快速浏览一下，首先你只是将“交换”的段落分配给你生成的随机数，这样它们就变成了一个数字而不是你的文本。您甚至对第三段也不做任何事情。 绑定（将事件与函数关联）未正确完成。我的意思是，当您已经在脚本中绑定了事件时，将 onclick 属性添加到 html 元素是多余的。这可能会导致每次点击都会触发该功能两次。但不是在这种情况下，因为你也打错了 onclick (onlick) 另外，' "" + x ' 表达式与 ' x ' 相同 【参考方案1】：好吧，如果我没记错的话，你想要的只是swap 那些divs 的值。
你的代码很好，你错过了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>【讨论】：
【参考方案2】：使用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>【讨论】：
@MaheerAli 是的，这很正常。 Sometiems Math.random 返回与段落当前位置相同的索引。 我知道，但我认为应该解决这个问题以上是关于Javascript随机段落交换，以任何随机顺序的主要内容，如果未能解决你的问题，请参考以下文章
给定一个随机顺序的整数数组，您必须找到最小交换次数才能将其转换为循环排序数组