时间戳

首页 > 解决方案 > 为什么我得到这个代码的空白元素？

javascript - 为什么我得到这个代码的空白元素？

问题描述

我正在编写一个以两个数组开头的脚本，一个有数据，一个没有。没有的应该是“使用”元素的数组。

我有一个“开始”按钮，可以将数组元素作为 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>

标签： javascripthtml

解决方案

下面的代码可能是固定的，但是当第一个项目被推回第一个数组时，第一个数组长度不再是0，所以你会卡在那里推回推。之后您没有指定您的预期行为。但是，如果您想交替循环每个数组直到为空，那么每次当前源长度为 0 时使用标志来切换源/目标数组将非常容易。

您还可以使用额外的 for 循环在列表中插入新的 l​​i 元素，但这是不必要的，因为您的 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>

推荐阅读