Can you explain to me why this code doesn't make my div appear/disappear? I'm new to JS, and just can't quite figure it out.
Here's the code:
Code:
<script type="text/javascript">
function mouseover() {document.getElementById("visiblediv").style.display="inline"}
function mouseout() {document.getElementById("visiblediv").style.display="none"}
</script>
<p>
<div onmouseover="mouseover()" onmouseout="mouseout()">Show the div</a><p>
<div name="visiblediv" style="visibility:visible;border:1px dotted black">This div is visible</div>
You cannot use the words mouseover and mouseout as the names of functions. And you must give your divs an id.
Code:
<script type="text/javascript">
function mover() {document.getElementById("visiblediv").style.display="inline"}
function mout() {document.getElementById("visiblediv").style.display="none"}
</script>
<div id = "div1" onmouseover="mover()" onmouseout="mout()">Show the div</a><p>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">This div is visible</div>
So - did anyone dare tell George Stephenson, "It's not Rocket science"?
At first glance, your div has a name, but not an ID, so getElementById definitely won't work. Might be something else I'm missing, but without more thorough checking... I doubt I'll catch it. Also, your HTML mark-up has some errors, like a closing anchor tag when there isn't an opening one, and no opening paragraph tags for all your paragraph elements.
And once again, I post without checking if someone has done so while I was writing the message. Sorry, Philip.
__________________
The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.
Ok, so I changed from mouseover/mouseout to mover/mout. I didn't realize mouseover/mouseout were keywords. In fact, I found them in a tutorial written just like that.
I also removed byelementid from my functions.
Here's the changed code:
Code:
<script type="text/javascript">
function mover() {document.visiblediv.style.display="inline"}
function mout() {document.visiblediv.style.display="none"}
</script>
<div id = "div1" onmouseover="mover()" onmouseout="mout()">Show the div</a><p>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">This div is visible</div>
I don't get why you say my div doesn't have an id. Isn't that what "<div id=" does?
And what part of my markup is incorrect? Are you talking about my <p>?
Can you explain to me why this code doesn't make my div appear/disappear? I'm new to JS, and just can't quite figure it out.
Here's the code:
Code:
<script type="text/javascript">
function mouseover() {document.getElementById("visiblediv").style.display="inline"}
function mouseout() {document.getElementById("visiblediv").style.display="none"}
</script>
<p>
<div onmouseover="mouseover()" onmouseout="mouseout()">Show the div</a><p>
<div name="visiblediv" style="visibility:visible;border:1px dotted black">This div is visible</div>
Let's look at the things marked in red (taken from your original post, where it's clear that your div does _not_ have an id. Old I may be, but senile... I am not.) Opening paragraph tag (<p>), so far so good... where do you close it? Opening div tag (the one where you're assigning your mover/mout functions) that also doesn't have a closing tag. Closing anchor tag (</a>) that doesn't have an opening anchor tag before it. And yet another opening paragraph tag(<p>) that doesn't have a closing tag after it. All in all, in those three lines of text, you have... *counts* four mark-up errors. Don't be jumpy when someone suggests you look at your mark-up and fix the errors. After all, anyone that looks at your original mark-up will not get a very good opinion. In this case, I was only trying to help. If I wanted to make fun of you, I certainly would have.
__________________
The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.
Let's look at the things marked in red (taken from your original post, where it's clear that your div does _not_ have an id. Old I may be, but senile... I am not.) Opening paragraph tag (<p>), so far so good... where do you close it? Opening div tag (the one where you're assigning your mover/mout functions) that also doesn't have a closing tag. Closing anchor tag (</a>) that doesn't have an opening anchor tag before it. And yet another opening paragraph tag(<p>) that doesn't have a closing tag after it. All in all, in those three lines of text, you have... *counts* four mark-up errors. Don't be jumpy when someone suggests you look at your mark-up and fix the errors. After all, anyone that looks at your original mark-up will not get a very good opinion. In this case, I was only trying to help. If I wanted to make fun of you, I certainly would have.
Doh! You are very correct about the <div></a> thing! That was my mistake when changing from an anchor to a div. Clumsy mistake! I've actually been coding in CSS/HTML/ASP for a few years, and am surprised I got nailed with that one.
I understand your comments about the <p> tag.
On the ID thing, do I need to put an ID on the first div? I'm not referencing it for anything. Only the 2nd one that is referenced to change it's visibility.
On the ID thing, do I need to put an ID on the first div? I'm not referencing it for anything. Only the 2nd one that is referenced to change it's visibility.
No, not necessary, but it is good practice to give all your divs an id. Makes it easier to make alterations.
In fact I was wrong - the words mouseover and mouseout are not reserved words, and may be used as the names of functions. But it should be obvious why this is unwise. onmouseover and onmouseout may most certainly not be used.
In paretheses, in Internet Explorer, names and IDs are global variables and thus you should NEVER use a global variable or function name which is the same as an HTML element name or ID. You should also avoid giving names or id's to your variables/functions/arguments/forms words which are JavaScript methods/attributes such as 'name' or 'id' or 'value' or 'text' or 'checked' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'. And of course you may not give a variable a name which is a Javascript keyword, such as case, char, false, return, this, void, and so on.
Before you post, read our: 
Sorry, Philip.
