Javascript 从一系列按钮返回值

所以我有这段代码，我觉得有一种方法可以做到这一点，而不需要if语句，也许带有“this”，但我看不出解决方案。我正在尝试获取按钮的值，以便在单击时发出警报

<form>
<button id="cathetersize14" type="button" value = "14g" onclick="cath()">14g</button>
<button id="cathetersize16" type="button" value = "16g" onclick="cath()">16g</button>
<button id="cathetersize18" type="button" value = "18g" onclick="cath()">18g</button>
<button id="cathetersize20" type="button" value = "20g" onclick="cath()">20g</button>
<button id="cathetersize22" type="button" value = "22g" onclick="cath()">22g</button>
<button id="cathetersize24" type="button" value = "24g" onclick="cath()">24g</button>

14g
16g
18克
20克
22克
24g

函数cath（）{
var msg=document.getElementById（“”）值；
警报（msg）；
}

将事件传递到

onclick

回调中，并向

cath

函数添加一个参数。然后，您可以访问如下所示的值：

函数cath（$event）{
var msg=$event.target.value；
警报（msg）；
}

---

14g

您将接收触发事件的元素作为参数的event.target。这样，您可以执行以下操作：

function cath(event) {
  alert(event.target.value);
}

---

希望这就是你想要解决的问题

或者，通过选择javascript中的按钮元素，可以消除html中重复的

onclick

。您可以通过标记进行选择，但我在下面的示例中将类名添加到元素中（假设页面上可能有其他按钮元素）

const buttons=document.getElementsByClassName（'cathetersize'）；
用于（让按钮中的按钮）{
button.onclick=（事件）=>{
警报（事件、目标、值）；
}
}

14g
16g
18克
20克
22克
24g

在前面的答案上稍微扩展一下，保持HTML表示和JavaScript代码之间的分离

//用于“cath”按钮单击事件的事件处理程序
函数处理程序（事件）{
日志（event.target.value）；
}
//创建所有DOM元素后，附加事件处理程序
document.addEventListener（“DOMContentLoaded”，function（））{
for（document.getElementsByClassName（“cath”）的let按钮）{
button.onclick=cathHandler；
}
});

14g
16g
18克
20克
22克
24g
有关最干净的方法，请参见上文@Tibrogargan的答案。
function cath(event) {
  alert(event.target.value);
}