从具有相同 class 名称的按钮获取不同的值

Question

I want to get the values from clicking the button with same class name, but whenever I clicked the button it shows undefined.

 var clr; const btn = document.querySelectorAll('.color'); function myFunction() { for (var i = 0; i < btn.length; i++) { clr = btn[i].value; console.log(clr); } }

 <div class="color"> <button class="btn" value="#BADA55" onclick="myFunction()"> Yellow </button> <button class="btn" value="#10A426" onclick="myFunction()"> Green </button> <button class="btn" value="#8787DE" onclick="myFunction()"> Purple </button> </div>

Answer 1

const btn = document.querySelectorAll('.color'); gets the div not the buttons. Change that to const btn = document.querySelectorAll('.btn'); :

 var clr; const btn = document.querySelectorAll('.btn'); function myFunction() { for (var i = 0; i < btn.length; i++) { clr = btn[i].value; console.log(clr); } }

 <div class="color"> <button class="btn" value="#BADA55" onclick="myFunction()"> Yellow </button> <button class="btn" value="#10A426" onclick="myFunction()"> Green </button> <button class="btn" value="#8787DE" onclick="myFunction()"> Purple </button> </div>

If you only want the value from the button being clicked, then change your code to

 function myFunction(btn) { console.log(btn.value); }

 <div class="color"> <button class="btn" value="#BADA55" onclick="myFunction(this)"> Yellow </button> <button class="btn" value="#10A426" onclick="myFunction(this)"> Green </button> <button class="btn" value="#8787DE" onclick="myFunction(this)"> Purple </button> </div>

Answer 2

do it in this way it will give you exact result

 function myFunction(event) { clr = event.target.value; console.log(clr); }

 <div class="color"> <button class="btn" value="#BADA55" onclick="myFunction(event)"> Yellow </button> <button class="btn" value="#10A426" onclick="myFunction(event)"> Green </button> <button class="btn" value="#8787DE" onclick="myFunction(event)"> Purple </button> </div>

Answer 3

First: scripting where scripting should be (no inline handlers). So add an event listener to the document , and let it check if the target (the element clicked) has classname btn . In that case: iterate through the an Array of elements with className btn ( Array.from(document.querySelectorAll(".btn")) ) using Array.forEach to display the values of those elements.

 document.addEventListener("click", myFunction); function myFunction(evt) { console.clear(); if (evt.target.classList.contains("btn")) { // a button.btn was clicked, so let report = `You clicked button with value ${evt.target.value}. Other.btn values:`; let values = []; Array.from(document.querySelectorAll(".btn")).forEach(val => val.== evt.target && values.push(val;value)). console.log(`${report} ${values,join("; ")}`); } }

 <div class="color"> <button class="btn" value="#BADA55"> Yellow </button> <button class="btn" value="#10A426"> Green </button> <button class="btn" value="#8787DE"> Purple </button> </div>