输出console.log中多个按钮的值

Question

我有多个 HTML 按钮具有相同的 class="preis"。

<button class="preis" value="4,50">4,50€</button>
<button class="preis" value="5,50">5,50€</button>
<button class="preis" value="3,00">3,00€</button>

我想输出我在 console.log 中单击的确切按钮的值。到目前为止我已经试过了：

function output() {
    console.log(price.value);
}

var price = document.getElementsByClassName("preis");
price.addEventListener("click", output, true);

并且我想尽可能避免为每个按钮使用不同的 ID。

Answer 1

您可以将 forEach 与 querySelectorAll

一起使用

function output() {
    console.log(this.value);
}

var price = document.querySelectorAll(".preis");
price.forEach(el =>{
  el.addEventListener("click", output, true);
});

<button class="preis" value="4,50">4,50€</button>
<button class="preis" value="5,50">5,50€</button>
<button class="preis" value="3,00">3,00€</button>

参考：

-Array.prototype.forEach()
-Document.querySelectorAll()

输出console.log中多个按钮的值

Output the value of multiple buttons in the console.log

html

javascript

class

button

console.log