jquery appending instead of an alert message

Question

I wan to display a message into a div rather than alert it, then hide it on click/blur The alert is popping up due to an error of typing. I need to display a message into a div and not an alert.

Something like:

$('form.form-calculator input').on('change click', function() {
        if ($(this).val() == 0) {
            var div = $("#AlertMessage");
            div = $("<div id='AlertMessage' onclick='$(this).hide();'></div>");
            $("body").prepend(div);
            this.value=0;
        }
        calc_total();
    });

With the Alert

 $(function () {
       $('.form input').on('change click focus', function () {
          if ($(this).val() == 0) {
            alert('HELLO');
            this.value = 0;
          }
          calc_total();
       });
    });

Answer 1

$(function () {
    $('.form input').on('focusout', function () {
        if ($(this).val() == 0) {
            showError('Hello');
        } else {
            $("#AlertMessage").remove();
        }
        calc_total();
    });

    function showError(text) {
        $("#AlertMessage").remove();
        $('<div/>', {
            id: 'AlertMessage',
            text: "Alert! It can't be 0"
        }).prependTo('body');
        // Close on click
        $('body').delegate('#AlertMessage', 'click', function () {
            $(this).hide();
        });
    }
});

Answer 2

Assuming both pieces of your code work (since you didn't ask to troubleshoot those), you can just combine those into one like this:

 $(function () {
       $('.form input').on('change click focus', function () {
          if ($(this).val() == 0) {
            div = $("<div id='AlertMessage' onclick='$(this).hide();'>HELLO</div>");
            $("body").prepend(div);
            this.value = 0;
          }
          calc_total();
       });
    });