Получить значение класса при нажатии ()

Question

Я использую jQuery для активации функции каждый раз, когда пользователь нажимает кнопку определенного класса. Я пытаюсь получить значение нажатой кнопки, и пока что не удается.

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>

Ожидаемый результат будет "7", поскольку это значение кнопки. В настоящее время я получаю undefined.

Заранее спасибо!

Answer 1

базовый ...

Чистый 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>

Чистый 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>

Answer 2

Если вы хотите придерживаться только JQuery, используйте $(this).val() Это даст вам значение кнопки.

измените ваш JS на:

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

Попробуйтеа также этот Jsfiddle, чтобы увидеть, если это то, что вы ищете: https://jsfiddle.net/9zjLfso8/

Также, если вы собираетесь использовать jQuery, я бы порекомендовал вам использовать $(document).ready вместо window.onload. Вот ссылка, чтобы увидеть разницу между ними: window.onload против $ (document) .ready ()

Answer 3

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

Answer 4

Вы можете сделать это с ванильным JavaScript:

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

Сценарий:

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