[SOLVED] Appearing but not disappearing block level element...

[dooper3]

Hi all,

 

I've just started to teach myself Javascript, and am struggling with my first script - give me php anyday!

 

It partly works, in that the onFocus part works and the hidden span element appears, but the onblur part does not, and so the span element does not hide itself when the user moves into the next field. Here is the code for the script in the head section:

 

<script language="javascript">
function ToggleMsg(input) {
     if (document.getElementById(input).style.display="none") { document.getElementById(input).style.display="block" }
     else if (document.getElementById(input).style.display="block") { document.getElementById(input).style.display="none" }
}
</script>

 

And here is the code for the form:

<form method=post name="myform">
<input style="width: 300;" onFocus="ToggleMsg('box1msg');" onBlur="ToggleMsg('box1msg');" /><br />
<span id="box1msg">This is my message</span>
<input style="width: 300; margin-top: 10px;" onfocus="ToggleMsg('box2msg');" onblur="ToggleMsg('box2msg');" />
<span id="box2msg">Second message<span>
</form>

 

Each span element is already set as "display: none;" in the css in the head section when the page loads.

 

Can anyone show me where i'm going wrong and explain why please?

[emehrkay]

That is because you are assigning values in your if statements, not checking for value

 

document.getElementById(input).style.display="none")

 

should be

 

document.getElementById(input).style.display=="none") //double equal sign

[dooper3]

Got it! The other problem seemed to be that I had the "display" style attribute set in the CSS in the head of the document, but when I put it into the span element itself it started working perfectly with the help you provided above emehrkay, thanks!