border properties...

[mrboyer79]

hey all,

i have this line of code:

document.getElementById("MESSAGE").innerHTML = total + " out of 24";

total is a variable that calculates the number of characters typed into a field. i need to have a red box appear around the total + " out of 24" if the total is > 24. here's what i have so far:

if ( total > 24 )
{
document.getElementById("MESSAGE").innerHTML = "<span style='border: 1px solid red; padding: .5em>" total + " out of 24</span>";
}
else
{
document.getElementById("MESSAGE").innerHTML = total + " out of 24";
}

this is obviously wrong because when the page loads i lose the "total out of 24" entirely. i'm pretty sure i'm just having syntax issues, but please advise!!

thanks...

[scripto]

If "MESSAGE" is a TextBox that could be the problem. Instead of a Texbox, try using a <DIV> - that will handle the innerHTML

[mrboyer79]

If "MESSAGE" is a TextBox that could be the problem. Instead of a Texbox, try using a <DIV> - that will handle the innerHTML

it actually is a div: <div id="message"><div>

[scripto]

then here you go - this seems to work well

document.getElementById("message").innerHTML = total + " out of 24";
document.getElementById("message").style.border="1 px solid red";
document.getElementById("message").style.padding=" .5em";

[mrboyer79]

then here you go - this seems to work well

document.getElementById("message").innerHTML = total + " out of 24";
document.getElementById("message").style.border="1 px solid red";
document.getElementById("message").style.padding=" .5em";

worked like a dream. thanks!