点击按钮后如何清空input输入框内容？附问题代码示例

userinput.value = ''无法清空输入框的原因非常明确：

• 代码中let userinput = input.value赋值得到的是输入框内容的字符串值，并非input DOM元素本身
• 基础类型字符串不存在value属性，对其做赋值操作不会关联修改页面上真实输入框的内容

直接对全局获取到的inputDOM元素的value属性赋空值即可，修改后的完整可运行代码：

let input = document.querySelector('input')
let list = document.querySelector('ul')
let button = document.querySelector('button')

button.addEventListener('click', addtodo)

function addtodo() {
  let userinput = input.value
  // 可选优化：过滤空内容，避免添加空白待办项
  if (!userinput.trim()) return
  let li = document.createElement('li')
  li.innerText = userinput
  list.appendChild(li)
  // 直接操作input元素完成清空
  input.value = ''
  console.log(userinput)
}

额外说明：如果确实想通过自定义变量操作输入框，需要把DOM元素本身赋值给变量，比如let userinput = document.querySelector('input')，后续再取userinput.value拿内容、userinput.value = ''清空，但当前代码已经提前获取了input变量，重复获取属于冗余操作。

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