点击单个input按钮时如何正确获取对应按钮的value值

你的代码逻辑有两处明显错误，直接导致了异常表现：

• 首次点击无输出：你把addTip()写在按钮的行内onClick属性里，第一次点击按钮时才会执行addTip函数，而这个函数的作用是遍历所有按钮、给每个按钮新增一个click事件监听——等于第一次点击只是完成了监听的注册，根本没走到打印value的逻辑，自然控制台没有输出。
• 点击后输出全部按钮值：每触发一次addTip，就会给所有按钮多绑一层重复的click监听，点击次数越多，绑定的冗余监听就越多，后续点击时所有累积的监听会同时触发，就会一次性打印出所有按钮的value。

两种写法都能实现「点击哪个按钮就只输出哪个按钮value」的需求，你可以按需选择：

方案1：DOM加载完成后统一绑定事件（更推荐，无冗余绑定问题） #

先把HTML里所有行内的onClick="addTip()"删掉，HTML结构简化为：

<input type="button" value="3">
<input type="button" value="5">
<input type="button" value="7">

JS代码放在页面底部或者DOM加载完成回调里执行，只做一次事件绑定，通过事件对象直接获取当前点击的元素：

document.addEventListener('DOMContentLoaded', () => {
  const tipBtns = document.querySelectorAll('input[type=button]');
  tipBtns.forEach(btn => {
    btn.addEventListener('click', (e) => {
      // e.target 就是当前被点击的按钮
      console.log(e.target.value);
      // 如果要做选中高亮效果，可以加下面的逻辑
      tipBtns.forEach(b => b.classList.remove('selected'));
      e.target.classList.add('selected');
    })
  })
})

方案2：保留行内onClick的写法 #

如果你不想改现有HTML的行内绑定写法，就不要在addTip里做遍历绑定的操作，调用时把事件对象传进去，直接取当前触发事件的元素即可。
HTML修改为调用时传入event：

<input type="button" value="3" onClick="addTip(event)">
<input type="button" value="5" onClick="addTip(event)">
<input type="button" value="7" onClick="addTip(event)">

对应JS代码简化为：

function addTip(e) {
  const currentBtn = e.target;
  console.log(currentBtn.value);
  // 选中高亮逻辑
  document.querySelectorAll('input[type=button]').forEach(b => b.classList.remove('selected'));
  currentBtn.classList.add('selected');
}

提示：做小费金额选择功能时，给选中按钮加个差异化的选中样式（比如上面代码里的selected类，搭配不同的背景色），能大幅提升交互体验。

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