Output the value of multiple buttons in the console.log

Question

I have multiple HTML buttons with the same 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>

I want to output the value of the exact button I clicked in the console.log. I've tried this so far:

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

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

and I want to avoid using different IDs for each button if thats possible.

you can add a function onClick to each button... – NoobDEV-GBL Aug 06 '21 at 10:23 — NoobDEV-GBL, Aug 06 '21 at 10:23

score 1 · Accepted Answer · answered Aug 06 '21 at 10:23

You can use forEach with 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>

Reference:

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

Output the value of multiple buttons in the console.log

1 Answers1