如何阻止待办事项列表添加条目后页面自动刷新？

你的问题核心是依赖location.reload()更新页面内容，移除后因未手动更新DOM和重新绑定事件导致报错。我们可以通过直接调用displayItems()刷新列表，同时处理输入框和默认事件问题，具体修改如下：

关键修改点 #

• 移除所有location.reload()：用displayItems()替代，它会重新渲染列表并绑定所有操作事件
• 添加preventDefault()阻止默认行为：在Enter键触发的事件中阻止页面默认刷新
• 优化交互细节：添加空内容判断、清空输入框，提升用户体验

修改后的完整JavaScript代码 #

const itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

document.querySelector("#enter").addEventListener("click", () => {
    const item = document.querySelector("#item")
    createItem(item)
})

document.querySelector("#item").addEventListener("keypress", (e) => {
    if(e.key === "Enter"){
        e.preventDefault(); // 阻止Enter键的默认刷新行为
        const item = document.querySelector("#item")
        createItem(item)
    }
})

function displayDate(){
    let date = new Date()
    date = date.toString().split(" ")
    date = date[1] + " " + date[2] + " " + date[3]
    document.querySelector("#date").innerHTML = date
}

function displayItems(){
    let items = ""
    for(let i = 0; i < itemsArray.length; i++){
        items += `<div class="item">
                    <div class="input-controller">
                      <textarea disabled>${itemsArray[i]}</textarea>
                      <div class="edit-controller">
                      <span class="material-symbols-outlined deleteBtn">
                      delete
                      </span>
                        <span class="material-symbols-outlined editBtn">edit</span>
                      </div>
                    </div>
                    <div class="update-controller">
                      <button class="saveBtn">Save</button>
                      <button class="cancelBtn">Cancel</button>
                    </div>
                  </div>`
    }
    document.querySelector(".to-do-list").innerHTML = items
    activateDeleteListeners()
    activateEditListeners()
    activateSaveListeners()
    activateCancelListeners()
}

function activateDeleteListeners(){
    let deleteBtn = document.querySelectorAll(".deleteBtn")
    deleteBtn.forEach((dB, i) => {
        dB.addEventListener("click", () => { deleteItem(i) })
    })
}

function activateEditListeners(){
    const editBtn = document.querySelectorAll(".editBtn")
    const updateController = document.querySelectorAll(".update-controller")
    const inputs = document.querySelectorAll(".input-controller textarea")
    editBtn.forEach((eB, i) => {
        eB.addEventListener("click", () => { 
            updateController[i].style.display = "block"
            inputs[i].disabled = false 
        })
    })
}

function activateSaveListeners(){
    const saveBtn = document.querySelectorAll(".saveBtn")
    const inputs = document.querySelectorAll(".input-controller textarea")
    saveBtn.forEach((sB, i) => {
        sB.addEventListener("click", () => {
            updateItem(inputs[i].value, i)
        })
    })
}

function activateCancelListeners(){
    const cancelBtn = document.querySelectorAll(".cancelBtn")
    const updateController = document.querySelectorAll(".update-controller")
    const inputs = document.querySelectorAll(".input-controller textarea")
    cancelBtn.forEach((cB, i) => {
        cB.addEventListener("click", () => {
            updateController[i].style.display = "none"
            inputs[i].disabled = true
            inputs[i].style.border = "none"
        })
    })
}

function createItem(item){
    if(item.value.trim() === "") return; // 空内容不添加
    itemsArray.push(item.value.trim())
    localStorage.setItem('items', JSON.stringify(itemsArray))
    item.value = ""; // 清空输入框
    displayItems(); // 重新渲染列表
}

function deleteItem(i){
    itemsArray.splice(i,1)
    localStorage.setItem('items', JSON.stringify(itemsArray))
    displayItems(); // 重新渲染列表
}

function updateItem(text, i){
    itemsArray[i] = text.trim()
    localStorage.setItem('items', JSON.stringify(itemsArray))
    displayItems(); // 重新渲染列表
}

window.onload = function() {
    displayDate()
    displayItems()
};

说明 #

• 移除location.reload()后，通过displayItems()手动更新DOM，同时该函数会重新绑定所有操作事件，避免按钮失效
• 在Enter键事件中添加e.preventDefault()，阻止浏览器默认的刷新行为
• 新增空内容判断，避免添加无效条目
• 添加条目后自动清空输入框，优化交互流程

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