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

Question

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

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

peirix · Accepted Answer · 2010-09-07 06:08:33Z

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.

answered Sep 7, 2010 at 6:08

peirix

37.9k24 gold badges98 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

OM The Eternity Over a year ago

Thanks @peirix could you please look at my updated question I have almost similar to your ides.. what corrections are needed in my code...

peirix Over a year ago

Not sure I understand. Is your code not working? If you have a new issue, you might want to post a new question, or just edit your question to include what isn't working. It looks fine to me.

VinayC · Accepted Answer · 2010-09-07 06:08:37Z

1

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

answered Sep 7, 2010 at 6:08

VinayC

49.6k7 gold badges64 silver badges74 bronze badges

2 Comments

OM The Eternity Over a year ago

Thanks @Vinay, Nope i am not using jquery I dnt want to

VinayC Over a year ago

Don't know if you want a non-intrusive message or a blocking message. You can achieve non-intrusive message relatively easy - u are already sort of doing it in your example - u just need add css/js to control position and dismissal of the message box. For blocking message, its bit too much work in java-script - essential steps involve 1) creating a translucent layer occupying entire screen on top of screen 2) Showing your message on top of this layer and 3) handling scrolling and resizing of window. That's why its better to use some library in such case.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related