待办列表点击添加时列表项重复显示问题求助

问题原因 #

你的代码每次点击添加按钮时，都会遍历整个all_list数组，将所有元素重复追加到列表的innerHTML中。比如：

• 第一次添加"1"：循环1次，列表显示<li>1</li>
• 第二次添加"2"：循环2次，把"1"和"2"都追加进去，列表变成<li>1</li><li>1</li><li>2</li>
• 第三次添加"3"：循环3次，追加"1""2""3"，最终出现重复项

修复方案 #

方案1：只添加新的待办项（推荐，更高效）

去掉遍历数组的逻辑，每次点击只把刚输入的内容添加到列表中，无需重复渲染已有项：

var add_input_txt = document.getElementById("add_input");
var add_btn = document.getElementById("add_list");
var show_list = document.getElementById("show_list");
var all_list = [];

add_btn.addEventListener("click", () => {
    var add_input_txt_value = add_input_txt.value;
    if(add_input_txt_value){
        all_list.push(add_input_txt_value);
        // 仅添加新的项
        show_list.innerHTML += `<li>${add_input_txt_value}</li>`;
        // 清空输入框，优化用户体验
        add_input_txt.value = '';
    }else{
        alert("Please enter first");
    }
});

方案2：重新渲染整个列表（适合需批量更新的场景）

如果后续需要对列表做排序、过滤等操作，可以先清空原有列表内容，再重新遍历数组渲染所有项：

var add_input_txt = document.getElementById("add_input");
var add_btn = document.getElementById("add_list");
var show_list = document.getElementById("show_list");
var all_list = [];

add_btn.addEventListener("click", () => {
    var add_input_txt_value = add_input_txt.value;
    if(add_input_txt_value){
        all_list.push(add_input_txt_value);
        // 先清空原有列表内容
        show_list.innerHTML = '';
        // 重新遍历渲染所有项
        for(var i = 0; i < all_list.length; i++){
            show_list.innerHTML += `<li>${all_list[i]}</li>`;
        }
        // 清空输入框
        add_input_txt.value = '';
    }else{
        alert("Please enter first");
    }
});

补充说明 #

两种方案都保留了all_list数组的存储逻辑，确保控制台打印的数组符合预期，同时解决了页面显示重复的问题。

内容的提问来源于stack exchange，提问作者Prem Kumar