Skip to content

Jquery click event not returning anything

My jquery is not alerting anything when I click the button with the id decrease. This is my code. I am using external js file.

    $('#decrease').click(function() {
        var beforeIncrement = $('#amt').val();

I tried doing this and it is working fine.


This is the html code:

<div class="row justify-content-center d-flex">
     <button id="decrease" class="btn btn-warning">-</button>
         <input type="number" id="amt" value="1"/>
     <button id="increase" class="btn btn-warning">+</button>

what’s wrong with my first code snippet?


The value you pass to ready() needs to be a function.

In your first example, you are passing the return value of $('#decrease').click(...).

This means that $('#decrease').click(...) has to be evaluated immediately, so it is looking for #decrease before the DOM is ready and the element doesn’t exist yet.

ready() then ignores the value you pass to it because it isn’t a function.

Wrap the call to $('#decrease').click(...) in a function, just as you did for alert(...) in the second example.

You also have a missing ); at the end but I’m guessing that just got cut off when you transcribed your code to the question.