CODEWITHSUNDEEP
javascript
OM The Eternity
OM The Eternity

Reputation: 16204

How to print a dynamic message in a <div> tag using Javascript?

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 ....

Upvotes: 1

Views: 9909

Answers (2)

VinayC
VinayC

Reputation: 49185

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).

Upvotes: 1

peirix
peirix

Reputation: 37741

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.

Upvotes: 2

Related Questions