How may I get the value of a button when a user clicks on it?

Question

I have four buttons:

<button id="button-yardSize" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize" class="btn btn-success" value="4"><h1>4</h1></button>
<button id="button-yardSize" class="btn btn-success" value="6"><h1>6</h1></button>
<button id="button-yardSize" class="btn btn-success" value="8"><h1>8</h1></button>

And I want to capture the value of the button clicked so that I may add it later with another button and add them together.

I added this for the JS:

var inputYardSize = $("#button-yardSize").on("click", function(){
  $("#button-yardSize").val();
  console.log(inputYardSize);
});

I read that I may need to use .attr instead, however not sure how to add a custom attribute to the buttons?

You're not storing the `.val()` anywhere. Remove `var inputYardSize =` from the beginning, and put it in front of `$("#button-yardSize").val();` instead. That said, jQuery's documentation says that `.val()` should work for all form elements so I'd expect it to work for a ` — Tyler Roper, Jan 17 '19 at 20:37
Side note: having [multiple elements with the same `id` value is not valid HTML](https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme). — esqew, Jan 17 '19 at 20:38
Possible duplicate of [how to get javaScript event source element?](https://stackoverflow.com/questions/10428562/how-to-get-javascript-event-source-element) — PM 77-1, Jan 17 '19 at 20:39

score 3 · Accepted Answer · answered Jan 17 '19 at 20:41

First of all, you should use a class, not an ID. IDs should be unique, and $("#button-yardSize") will only select the first button.

In the event listener you can use this to refer to the button that was clicked.

You need to assign the inputYardSize variable inside the function. .on() just returns the jQuery object you're binding the handler to, not the value from inside the function.

$(".button-yardSize").on("click", function() {
  var inputYardSize = $(this).val();
  console.log(inputYardSize);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success button-yardSize" value="2"><h1>2</h1></button>
<button class="btn btn-success button-yardSize" value="4"><h1>4</h1></button>
<button class="btn btn-success button-yardSize" value="6"><h1>6</h1></button>
<button class="btn btn-success button-yardSize" value="8"><h1>8</h1></button>

score 1 · Answer 2 · answered Jan 17 '19 at 20:38

EDIT: You should use ID for unique elements and class for repeating element.

So if you would replace the ID with class on the button, the code should look like this:

Remove the declaration from the beginning and instead use it to store the values inside the click function.

In this way, you will have the value of the clicked button with the specified class.

$('.button-yardSize').on('click', function(){
    var inputYardSize = $(this).val();
    console.log(inputYardSize);
})

score 0 · Answer 3 · answered Jan 17 '19 at 20:43

The id of each element has to be unique

<button id="button-yardSize1" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize2" class="btn btn-success" value="4"><h1>4</h1></button>

The JS function is incorrect, you need a click handler which will log the button value

$("#button-yardSize1").on("click", function(){
       inputYardSize=$("#button-yardSize1").val();
       console.log(inputYardSize);
});

How may I get the value of a button when a user clicks on it?

3 Answers3