为什么我得到这个代码的空白元素？
[英]Why am I getting a blank element with this code?
问题描述
我正在编写一个以两个 arrays 开头的脚本，一个有数据，一个没有数据。 没有的应该是“使用”元素的数组。
我有一个“开始”按钮，可以将数组元素作为 li 元素打印到相应的 ul 列表中。
我还有一个“移动”按钮，用于删除随机元素，并将其附加到“已使用”数组，然后重新打印列表以反映更改。 如果第一个列表为空，它会遍历第二个列表并将其推回第一个列表。
我遇到的问题是，随机地，我得到了一个似乎是空元素的东西，它被打印到任一数组中。 当按下“开始”按钮“重置”所有内容时，我也没有得到预期的结果。 我已经尝试了所有我能想到的，但我无法让它按照我想要的方式工作。
let arr1 = [1, 2, 3, 4, 5]; let arr2 = []; const startBtn = document.getElementById('startBtn'); const moveBtn = document.getElementById('moveBtn'); const listOne = document.getElementById('listOne'); const listTwo = document.getElementById('listTwo'); const buildList = (arr, list) => { // Remove elements to start fresh while(list.firstChild) { list.removeChild(list.firstChild); } // Build List for(let i = 0; i < arr.length; i ++) { const li = document.createElement('li'); li.textContent = arr[i]; list.appendChild(li); } }; startBtn.addEventListener('click', () => { buildList(arr1, listOne); buildList(arr2, listTwo); }); moveBtn.addEventListener('click', () => { if(arr1.length === 0) { for(let i = 0; i < arr2.length; i++) { arr1.push(arr2.splice(arr2[i], 1)); } } else { const randomIndex = Math.floor(Math.random() * arr1.length); arr2.push(arr1.splice(randomIndex, 1)); for(let i = 0; i < arr2.length; i ++) { const li = document.createElement('li'); li.textContent = arr2[i]; listTwo.appendChild(li); } } buildList(arr1, listOne); buildList(arr2, listTwo); });
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Array Test</h1> <button id="startBtn">Start</button> <button id="moveBtn">Move</button> <br> <ul id="listOne"></ul> <ul id="listTwo"></ul> <script src="script.js"></script> </body> </html>
2 个解决方案
解决方案1
1 2019-11-12 14:02:28
下面的代码可能是固定的，但是当第一个项目被推回第一个数组时，第一个数组长度不再是0，所以你会卡在那里推回推。 之后您没有指定您的预期行为。 但是，如果您想交替循环每个数组直到为空，则每次当前源长度为 0 时，使用标志来切换源/目标 arrays 将非常容易。
您还可以使用额外的 for 循环在列表中插入新的 li 元素，但这是不必要的，因为您的 buildList function 已经完成了列表操作。
let arr1 = [1, 2, 3, 4, 5]; let arr2 = []; const startBtn = document.getElementById('startBtn'); const moveBtn = document.getElementById('moveBtn'); const listOne = document.getElementById('listOne'); const listTwo = document.getElementById('listTwo'); const buildList = (arr, list) => { // Remove elements to start fresh while(list.firstChild) { list.removeChild(list.firstChild); } // Build List for(let i = 0; i < arr.length; i ++) { const li = document.createElement('li'); li.textContent = arr[i]; list.appendChild(li); } }; startBtn.addEventListener('click', () => { buildList(arr1, listOne); buildList(arr2, listTwo); }); moveBtn.addEventListener('click', () => { let randomIndex; if (arr1.length) { randomIndex = Math.floor(Math.random() * arr1.length); (arr2).push(arr1.splice(randomIndex, 1)); } else { randomIndex = Math.floor(Math.random() * arr2.length); (arr1).push(arr2.splice(randomIndex, 1)); } buildList(arr1, listOne); buildList(arr2, listTwo); });
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Array Test</h1> <button id="startBtn">Start</button> <button id="moveBtn">Move</button> <br> <ul id="listOne"></ul> <ul id="listTwo"></ul> <script src="script.js"></script> </body> </html>
解决方案2
1 2019-11-12 14:04:34
要使开始按钮起作用，您需要重置 arr1 和 arr2
startBtn.addEventListener('click', () => {
arr1 = [1, 2, 3, 4, 5];
arr2 = [];
buildList(arr1, listOne);
buildList(arr2, listTwo);
});
至于您的空白条目，这是由于在向前循环时拼接数组引起的
for(let i = 0; i < arr2.length; i++) {
arr1.push(arr2.splice(arr2[i], 1));
}
如果您像这样向后循环，它将起作用
for(let i = arr2.length; i > 0 ; i--) {
arr1.push(arr2.splice(arr2[i], 1));
}
或者你可以这样做
arr1 = arr2;
arr2 = [];
为什么我收到关于ajax请求的空白响应？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.