Question

I want to hide and show a button on a particular condition in JavaScript.

Code:

$(function(){
    // hide the div initially
    $("#a").hide();

    // Check to see if there is 250 in the url
    var bal_amount = document.getElementById('balance_amount');
    if (bal_amount.value > 0) {
        $("#a").show();
    }
});

HTML

<form>
<input type="text" id="balance_amount">
</form>

<image src="image.jpg" id="a">

But it doesn’t work.

Answer 1

You will need to change this portion of your code –

// Check to see if there is 250 in the url
var bal_amount = document.getElementById('balance_amount');
if (bal_amount.value > 0)
{
    $("#a").show();
}

You are executing the above piece of code inside document ready event, which means it will be executed right when the page loads, and only once.

To remedy this, you need to place this code inside an event handler –

​$(document).ready(function () {
    $("#a").hide();

    // See this? This is the event handler for the
    // change event which will fire whenever the value
    // of the text box changes.
    $('#balance_amount').change(function () {
        // Check to see if there is 250 in the url
        if ($(this).val() > 0) {
            $("#a").show();
        }
    });
});​

In this way, whenever the value of the balance_amount field changes, this event will trigger and validate your balance amount for your.

Here you will find a working demo.

You can further improve your code by checking for invalid input in the text box –

​$(document).ready(function () {
    $("#a").hide();

    // See this? This is the event handler for the
    // change event which will fire whenever the value
    // of the text box changes.
    $('#balance_amount').change(function () {

        var balance = parseInt($(this).val(), 10);
        if (isNaN(balance)) {
            alert('You have entered an invalid value');
            return false;
        }

        if (balance > 0){
            $("#a").show();
        }

        // There you go, an else block for you
        else {
            $("#a").hide();
        }
    });
});​