不使用onclick属性，如何用JS获取HTML按钮value并打印到控制台

错误原因 #

你的代码核心问题出在变量赋值逻辑错误：

• 你直接把price变量赋值为了按钮的value属性值（也就是字符串"4,50"），字符串类型不存在addEventListener方法，自然无法绑定点击事件
• 你在页面加载阶段就提前读取了按钮的value，后续如果按钮value动态变化，打印值也不会同步更新

正确实现代码 #

HTML部分（和原有代码一致即可）

<button id="kaufknopf" value="4,50">4,50€</button>

JS部分

// 先获取完整的按钮DOM元素，不要直接取value
const kaufButton = document.getElementById("kaufknopf");
// 给DOM元素绑定点击事件
kaufButton.addEventListener("click", output, true);

// 点击触发时再读取按钮当前的value值
function output() {
    const price = this.value;
    console.log(price);
}

补充说明 #

如果需要避免this指向问题，也可以用事件对象的target属性取值，output函数可改写为：

function output(e) {
    const price = e.target.value;
    console.log(price);
}

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