每次点击按钮仅读取到旧input值，如何获取最新的输入内容？

• 重复绑定事件：你已经给按钮设置了onclick="test()"触发test函数，又在test函数内部每次执行都给按钮新增一个click事件监听器，多次点击后按钮会绑定多个重复的监听器
• 变量值固定过早：message和newMessage是在test函数执行时就用当前input的值计算完成的，绑定到事件监听器里的是固定的旧值，后续修改input内容也不会重新计算这两个变量，所以每次弹出的都是第一次绑定时的值

方案1：最简修改（复用现有onclick逻辑） #

直接去掉test函数里多余的事件绑定逻辑，把值读取和提示的逻辑直接放在test函数内，每次点击都会实时读取input最新值：

function test() {
  var message = document.getElementById("name").value;
  var newMessage = message + " HELLO!";
  alert(newMessage);
  console.log(newMessage);
}

HTML代码无需修改即可正常运行。

方案2：规范写法（移除行内onclick，统一事件绑定） #

先修改HTML，去掉button的行内onclick属性：

<button class="main" id="send">DONE</button>

再修改JS代码，页面DOM加载完成后只绑定一次事件监听器，每次触发点击时实时读取input值：

document.addEventListener('DOMContentLoaded', function() {
  const sendBtn = document.getElementById('send')
  const nameInput = document.getElementById('name')
  sendBtn.addEventListener('click', function(e) {
    e.stopImmediatePropagation()
    const newMessage = nameInput.value + " HELLO!"
    alert(newMessage)
    console.log(newMessage)
  })
})

该写法避免了重复绑定的问题，也符合前端事件绑定的规范。

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