表单提交后使用textContent=''清空输入字段失效问题

你用textContent = ''清空输入框无效的核心原因是：<input>这类表单输入控件的内容是通过value属性管理的，textContent只适用于普通文本元素（比如<div>、<p>）。

解决步骤 #

1. 替换清空逻辑：把document.querySelector('.input').textContent = ''改成inputField.value = ''——你已经提前获取了inputField变量，直接复用它能避免重复查询DOM，提升效率。
2. 简化冗余代码：你代码末尾的if (!document.querySelector(...).classList.contains('hidden')) break完全没必要，刚执行完remove('hidden')后元素肯定不再包含该类，直接写break即可。

修改后的完整代码 #

const inputField = document.querySelector('.input');
document.querySelector('.submit').addEventListener('click', function() {
    for (let i = 1; i <= 5; i++) {
        const positionEl = document.querySelector(`.position-${i}`);
        if (positionEl.classList.contains('hidden')) {
            positionEl.classList.remove('hidden');
            document.querySelector(`.text-${i}`).textContent = inputField.value;
            inputField.value = ''; // 正确的清空方式
            break;
        }
    }
})

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