Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    47
    Thanks
    5
    Thanked 1 Time in 1 Post

    Can't make my divs appear/disappear with JS

    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>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,150
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    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"?
    Last edited by Philip M; 03-13-2009 at 06:58 PM.

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    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.
    Last edited by Eldarrion; 03-13-2009 at 06:58 PM.
    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.

    How to ask smart questions?

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    47
    Thanks
    5
    Thanked 1 Time in 1 Post
    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>?

    Please explain.

  • #5
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Quote Originally Posted by SlowCoder View Post
    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.

    How to ask smart questions?

  • #6
    New Coder
    Join Date
    May 2007
    Posts
    47
    Thanks
    5
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Eldarrion View Post
    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.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,150
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by SlowCoder View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •