CODEWITHSUNDEEP
javascripthtml
R_JS_Noob
R_JS_Noob

Reputation: 3

Capturing the value of a button

Get the value of a button and print it to the console.

I currently have a number of buttons (html) all have the same ID but different values.
when a button is clicked I want to print its value to the console. 

document.getElementById("calcButtonID").addEventListener("click", btnPress);


function btnPress() {

  var x = document.getElementById("calcButtonID").value

  console.log(x);

}

It always displays the value of the first button ("1") regardless of the button I click,

What am i doing wrong? I think i need to pass the event listener to the function so it knows what button was clicked and not just the first ID it comes across

Thanks for the help (im getting there :) )

Upvotes: 0

Views: 996

Answers (3)

ocheriaf
ocheriaf

Reputation: 600

An id is a unique identifier for only one html element. If you wnat to find several element, use class. Here is an example. 

var buttons = document.getElementsByClassName("calcButton")
for(var i = 0; i<buttons.length; i++){
  buttons[i].addEventListener("click", btnPress)
}
function btnPress(ev) {

  console.log(ev.target.value);

}
<!-- begin snippet: js hide: false console: true babel: false -->
    <button class="calcButton" value="1">1</button>
    <button class="calcButton" value="2">2</button>
    <button class="calcButton" value="3">3</button>
    <button class="calcButton" value="4">4</button>

But as specified, it's better to use the onclick attribute rather than find the element by its classname

Upvotes: 0

connexo
connexo

Reputation: 56754

You cannot have more than one element with id="calcButtonID" (or any other given id value). id must be unique at all times.

Instead of id, use the class attribute. Here's an example:

// get a NodeList of the buttons
const buttons = document.querySelectorAll('.report-value');

// turn the NodeList into an Array so we can use array methods on the list
const buttonsArray = Array.from(buttons);

// now iterate over the button list...
buttonsArray.forEach(function(button) {
  // ... so we can give each button a click listener
  button.addEventListener('click', function(event) {
    // inside the event listener function, `this` points to the button that was clicked
    console.log(this.value);
    // alternatively, you can get the clicked button from the event object that is implicitly passed as event.target
    console.log(event.target.value);
  });
})
<input type=button value=foo class="report-value" />
<input type=button value=bar class="report-value" />
<input type=button value=baz class="report-value" />

Upvotes: 0

Andr&#233; Polykanine
Andr&#233; Polykanine

Reputation: 3379

As pointed in the comments to the question, you may use e.target.value, or add data-attributes to your buttons, but since you asked about what you're doing wrong, I'll answer that particular question for you to avoid such problems in future.
Basically, an ID must be unique on page, proof here. So your main error is that several buttons have the same ID. What they can share though, is the name attribute, if for some reason you need them to be processed as a single element.
However, in this latest case, I would recommend using <input type="radio">, i.e., a group of radio buttons with the same name, but again, with different unique IDs.

Upvotes: 1

Related Questions