Obtain the value of the class when click()

Question

I'm using jQuery to activate a function every time the user clicks on a button that has a certain class. I'm trying to get the value of the button clicked, and so far, failing.

window.onload = function() {
    $('.button').click(function(item) {
        console.log(item.value);
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" value="7">7</button>

The expected result would be "7", since that is the value of the button. Currently, I'm getting undefined.

Thanks in advance!

use `item.target.value` or `this.value` to reach the element instead of the event object. — dandavis, Oct 08 '19 at 17:37
Use `console.log(item)` to see what you actually have: an event. — Karl-André Gagnon, Oct 08 '19 at 17:38
This works! Thanks a lot. I was looking through everything that the event has, but I simply didn't see the value. — Ivan Penev, Oct 08 '19 at 17:40
@IvanPenev if my solution worked for you, could you mark my solution as the accepted answer? — King11, Oct 08 '19 at 19:11

King11 · Answer 1 · 2019-10-08T17:51:46.693

If your want to stick with using just JQuery, Use $(this).val() That should get you the value of the button.

change your JS to this:

$(document).ready (function() {
    $('.button').click(function(item) {
        console.log($(this).val());
    });
});

Try out this Jsfiddle as well to see if this is what you're looking for: https://jsfiddle.net/9zjLfso8/

Also if you're going to use jQuery, I would recommend that you use $(document).ready instead of window.onload. Here's a link to see the difference between the two: window.onload vs $(document).ready()

score 2 · Answer 2 · answered Oct 08 '19 at 17:47

2

window.onload = function() {
    $('.button').click(function(e) {
        console.log(e.target.textContent);
    });
}

answered Oct 08 '19 at 17:47

Jay Kariesch

1,392
7
13

Mister Jojo · Accepted Answer · 2019-10-08T18:03:56.743

basic one...

Pure jQuery:

$(document).ready(function() {
  $('.button').click(function(item) {
    console.clear();
    console.log( $(this).text(), ' = ', $(this).val() );
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" value="7">bt 7</button>
<button class="button" value="8">bt 8</button>

Pure JS:

window.onload = function() {

  document.querySelectorAll('.button').forEach(bt=>{
    bt.onclick=e=>{
      console.clear()
      console.log(e.target.textContent,' = ', e.target.value) 
    }
  })
}

<button class="button" value="7"> bt 7 </button>

<button class="button" value="8"> bt 8 </button>

score 1 · Answer 4 · edited Oct 08 '19 at 17:42

1

You can do it with vanilla JavaScript:

   <button class="button" 
   onclick="myFunc(7)">7</button>

The script:

   function myFunc(value){
       console.log(value)
   }

edited Oct 08 '19 at 17:42

Dalorzo

19,834
7
55
102

answered Oct 08 '19 at 17:41

bill.gates

14,145
3
19
47

With that small script? How? – bill.gates Oct 08 '19 at 17:43
Ah i see, i forgot the "function" at the end – bill.gates Oct 08 '19 at 17:45

Obtain the value of the class when click()

4 Answers4