CODEWITHSUNDEEP
javascript
MrHolmes
MrHolmes

Reputation: 21

get the different values from button with same class name

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>

Upvotes: 0

Views: 859

Answers (3)

Damodhar
Damodhar

Reputation: 1317

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>

Upvotes: 1

KooiInc
KooiInc

Reputation: 122916

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>

Upvotes: 0

j08691
j08691

Reputation: 207900

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>

Upvotes: 1

Related Questions