How do I check the value of the button that I am clicking on?

Question

I have tried console logging the button that I am clicking with the $(this) selector but it just does not want to log to the console and when it logs, it's empty.

$(document).ready(function(){
     $('.button').on('click', ()=>{
         var clickedBtn = $(this).children(":first").text();
         console.log(clickedBtn);
      })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
    <div class=" title welcome-msg-head level-left">
        <p>Welcome to the personality test!</p>
    </div>

    <div class="q-block">
      <div class="opacity">
        <h1 style="color: black;">How old is rick?</h1>

        <button id="69" class="button" value="69"><p>69</p></button>
        <button id="103" class="button" value="103"><p>103</p></button>
        <button id="45" class="button" value="45"><p>45</p></button>
        <button id="70" class="button" value="70"><p>70</p></button>

      </div>
      <progress class="is-primary progress" value="0.25"/>
    </div>
</div>

`$('.button').on('click', function() {` - `()=>` doesn't pass through `this` — freedomn-m, Mar 08 '22 at 10:59
Separately, why `$(this).children(":first").text()` instead of `this.value`? — T.J. Crowder, Mar 08 '22 at 11:01

Femil Savaliya · Answer 1 · 2022-03-08T11:14:43.903

Here you go

$(document).ready(function() {
  $('.button').on('click', function() {
    $("progress").attr("value", ($(this).data("val") / 100));
    console.log($(this).data("val"));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class=" title welcome-msg-head level-left">
    <p>Welcome to the personality test!</p>
  </div>

  <div class="q-block">
    <div class="opacity">
      <h1 style="color: black;">How old is rick?</h1>

      <button id="69" class="button" data-val="69"><p>69</p></button>
      <button id="103" class="button" data-val="103"><p>100</p></button>
      <button id="45" class="button" data-val="45"><p>45</p></button>
      <button id="70" class="button" data-val="70"><p>70</p></button>

    </div>
    <progress class="is-primary progress" value="0.48" />
  </div>
</div>

Btw you can use () => {} function if you want to use this

"*Btw you can use [arrow function] if you want to use this*" - please clarify. Or did you mean "you *can't* use [arrow function"? — freedomn-m, Mar 08 '22 at 11:12
I mean there are two types of functions 1. `function(){}` 2. `const fun_name = () => {}` You can use `this` keyword in the first type of function declaration and `$event` in second type of function — Femil Savaliya, Mar 08 '22 at 11:17

How do I check the value of the button that I am clicking on?

1 Answers1