jQuery- attr/value not retrieving a value as number but NaN

Question

I'm trying to make a button that returns a value as a number when clicked. However it returns NaN. Could anyone tell what went wrong?

         <div class="card-body">
            <button id="button-1" class="btn btn-primary number" value="1">
              <h1>1</h1>
            </button>

         </div>
--------------------------------------------------------------------------------------------------

        $(document).ready(function () {

           var userBtnValue = ($(this).attr("value"));
           userBtnValue = parseInt(userBtnValue);
           console.log(userBtnValue);


    });

Answer 1

It seems you forgot to write the onclick function for the button

$(document).ready(function() {
  $('body').on('click', '#button-1', function() {
    var userBtnValue = ($(this).attr("value"));
    userBtnValue = parseInt(userBtnValue);
    console.log(userBtnValue);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="card-body">
  <button id="button-1" class="btn btn-primary number" value="1">
    <h1>1</h1>
  </button>
</div>

This will give you your expected result.