JavaScript：点击按钮后输入框旧值残留及清除问题的解决方法

问题根源 #

你当前的代码把click事件监听写在了keyup事件内部，每次输入字符都会给按钮新增一个点击监听。这些旧的监听不会被覆盖，点击按钮时会一次性执行所有历史绑定的监听，每个监听携带的是当时存的userValue，所以会出现旧值重复显示的问题。

修正后的代码 #

JavaScript 代码

const addEvent = document.querySelector('.add');
const eventUserInput = document.querySelector('.input2');
const parentEl = document.querySelector('.event-list');

// 直接给按钮绑定一次点击事件即可
addEvent.addEventListener('click', () => {
    // 点击时才获取输入框当前的最新值
    const userValue = eventUserInput.value.trim();
    // 可选：避免添加空内容
    if (!userValue) return;
    
    const storeElement = document.createElement('p');
    storeElement.textContent = userValue; // 用textContent比innerHTML更安全，避免XSS风险
    parentEl.appendChild(storeElement);
    
    // 清空输入框
    eventUserInput.value = '';
});

// 可选：支持回车触发添加
eventUserInput.addEventListener('keyup', (e) => {
    if (e.key === 'Enter') {
        addEvent.click();
    }
});

HTML 代码（无需修改，直接使用即可）

<div class="list">
    <label for="input"></label>
    <input type="text" id="input" class="input2" placeholder="enter activity">
    <i class="ri-add-fill add">btn</i>

    <div class="event-list"></div>
</div>

关键改进点 #

• 把点击事件的监听移到外部，只绑定一次，避免监听累积。
• 点击按钮时实时获取输入框的当前值，而不是提前存在变量里。
• 用textContent替代innerHTML，更安全（防止用户输入恶意HTML代码）。
• 增加了空值判断，避免添加空的内容。
• 可选添加了回车触发功能，提升用户体验。

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