jquery get array of buttons and their values

Question

Im new in JS and Jquery. I have been trying to set an event to all buttons in the same class, meanwhile I'm tryinh to get the value of each button.

In my HTML I got:

<div id="highlightButtons">
    <button type="button" class="btn btn-primary" value="1">1</button>
    <button type="button" class="btn btn-primary" value="2">2</button>
    <button type="button" class="btn btn-primary" value="3">3</button>
    <button type="button" class="btn btn-primary" value="4">4</button>
    <button type="button" class="btn btn-primary" value="5">5</button>
    <button type="button" class="btn btn-primary" value="6">6</button>
    <button type="button" class="btn btn-primary" value="7">7</button>
    <button type="button" class="btn btn-primary" value="8">8</button>
    <button type="button" class="btn btn-primary" value="9">9</button>
</div>

And in my JS I tried this:

(function() {
    'use strict'
    var all_hl_btns = $('#highlightButtons');
    all_hl_btns.click(function(){
        var value = $(this).text();
        alert(value);
    });
}());

At this point, I'm just trying get the value of each button that I click, but when I click in any button, I got a text of numbers (1 to 9) in a Column. I would appreciate any kind of help. Thank you in advance!

Thank you @Mohammad... It worked, place that as a reply and I will mark as answer! — João Silva
– João Silva, Commented Oct 8, 2016 at 15:45
Or #highlightButtons button if you want to restrict the event handler to only the buttons within that container — Rory McCrossan
– Rory McCrossan, Commented Oct 8, 2016 at 15:46
Or even $("#highlightButtons button").toArray() if you wanted an "array of buttons". — adeneo
– adeneo, Commented Oct 8, 2016 at 15:54

Mohammad · Accepted Answer · 2016-10-08 15:48:14Z

1

You trying to add click event to #highlightButtons and when you click on it, javascript get text of it that is 123456789. You need to add click event to buttons. In the case, your selector changed to $('#highlightButtons > button')

(function() {
    'use strict'
    var all_hl_btns = $('#highlightButtons > button');
    all_hl_btns.click(function(){
        var value = $(this).text();
        alert(value);
    });
}());

var all_hl_btns = $('#highlightButtons > button');
all_hl_btns.click(function(){
  var value = $(this).text();
  console.log(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="highlightButtons">
      <button type="button" class="btn btn-primary" value="1">1</button>
      <button type="button" class="btn btn-primary" value="2">2</button>
      <button type="button" class="btn btn-primary" value="3">3</button>
      <button type="button" class="btn btn-primary" value="4">4</button>
      <button type="button" class="btn btn-primary" value="5">5</button>
      <button type="button" class="btn btn-primary" value="6">6</button>
      <button type="button" class="btn btn-primary" value="7">7</button>
      <button type="button" class="btn btn-primary" value="8">8</button>
      <button type="button" class="btn btn-primary" value="9">9</button>
    </div>

answered Oct 8, 2016 at 15:48

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

João Silva Over a year ago

Thank you for the complete answer!

Collectives™ on Stack Overflow

jquery get array of buttons and their values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related