我正在编写一个以两个数组开头的脚本，一个包含数据，一个不包含数据。没有的应该是一个“已使用”元素的数组。
我有一个“开始”按钮，它将数组元素作为 li 元素打印到相应的 ul 列表中。
我还有一个“移动”按钮，可以删除随机元素，并将其附加到“已使用”数组，然后重新打印列表以反射(reflect)更改。如果第一个列表为空，它将循环遍历第二个列表并将其推回第一个列表。
我遇到的问题是，随机地，我得到了一个似乎是空元素的东西，并且它被打印到任一数组中。当按下“开始”按钮“重置”所有内容时，我也没有得到预期的结果。我已经尝试了所有我能想到的方法，但无法让它按照我想要的方式工作。
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>最佳答案
下面的代码可能是固定的，但是当第一个项目被推回到第一个数组时，第一个数组的长度不再是0，所以你会卡在那里来回推。之后您没有指定您的预期行为。但是，如果您想交替循环每个数组直到为空，则每次当前源长度为 0 时使用标志来切换源/目标数组将非常容易。
您还使用了额外的 for 循环来在列表中插入新的 li 元素，但这是不必要的，因为列表操作已由您的 buildList 函数完成。
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>关于javascript - 为什么我使用此代码会得到一个空白元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58819747/