I have a message "I have 3 tries left", in this message "3" is dynamic and by default my <div> tag is set to style="display:none" :

<div id="triesleft" style="display:none"></div>

I am looking for a way to display the above message in a <div> dynamically on onchange event of a select box..

I tried with this

function triesleftfunc()
{
    var size = document.getElementById('size').value.split('x');
    var sizesqft = size[0]*size[1];
    var trial = document.getElementbyId(tires).value;
    if(sizesqft >= 50 && document.getElementById('options').value == 'Stiched Finish')
    {
        document.getElementById('triesleft').innerHTML = "I have "+trial+" tries left";
        document.getElementById('triesleft').display = "block";

        document.getElementById('options').focus();
        return false;
    }
}

NOTE I dont need alert Box it looks BAD BAD ....

I have a message "I have 3 tries left", in this message "3" is dynamic and by default my <div> tag is set to style="display:none" :

<div id="triesleft" style="display:none"></div>

I am looking for a way to display the above message in a <div> dynamically on onchange event of a select box..

I tried with this

function triesleftfunc()
{
    var size = document.getElementById('size').value.split('x');
    var sizesqft = size[0]*size[1];
    var trial = document.getElementbyId(tires).value;
    if(sizesqft >= 50 && document.getElementById('options').value == 'Stiched Finish')
    {
        document.getElementById('triesleft').innerHTML = "I have "+trial+" tries left";
        document.getElementById('triesleft').display = "block";

        document.getElementById('options').focus();
        return false;
    }
}

NOTE I dont need alert Box it looks BAD BAD ....

• javascript

Share Improve this question Follow edited Sep 7, 2010 at 6:11 OM The Eternity asked Sep 7, 2010 at 6:04 OM The EternityOM The Eternity 16.2k4444 gold badges125125 silver badges187187 bronze badges 1

• 1 It should be document.getElementById('triesleft').style.display = "block"; – Strelok Commented Sep 7, 2010 at 6:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Something like this should do it.

var triesLeft = 3;
document.getElementById("MySelectBox").onchange = function() {
    document.getElementById("triesleft").innerText = "You have " + triesLeft + 
                                                     " tries left.";
    document.getElementById("triesleft").style.display = "block";
    triesleft--;
}

And then just do some check on triesleft to make sure it's not zero or less.

If you are using jquery then look at BlockUI plug-in. It supports both blocking message or growl kind of message (the non-intrusive message - for example one thats appear on this site).