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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2012
    Location
    Canada
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    unobtrusive javascript

    I'm trying to use unobtrusive javascript (keeping the javascript out of the html). I'm trying to show (make visible) a div I've hidden.

    Code:
    ...
    <style type="text/css">
    #popup {visibility:hidden;}
    </style>
    
    <script>
    document.getElementById("medbutton1").onclick=showmedical;
    
    function showmedical ()
    {
    document.getElementById("popup").style.visibility="visible";
    }
    </script>
    ...
    
    <body>
    <div id="you">
    <button type="button" id="medbutton1">Show Medical</button>
    </div>
    
    <div id="popup">
    content
    </div>
    Clicking the button is not changing the div to visible. What am I doing wrong?
    Last edited by jswannabe; 08-01-2013 at 09:48 PM.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Move the JavaScript to just before the </body> tag. Your code is not working because the JavaScript is attached in the wrong place in the page.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Nov 2012
    Location
    Canada
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts
    1. Thank you! It worked!
    2. Sigh, I'm frustrated because in all my googling I've not read anywhere that location mattered.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    document.getElementById("medbutton1") is intended to reference <button type="button" id="medbutton1"> and so the HTML code for the button must exist before the JavaScript can find it.

    Since almost all JavaScript needs to interact with the HTML and needs that HTML to exist first, the simplest solution is to always place all your JavaScript at the bottom of the page.

    I know of only two exceptions where the JavaScript needs to go in the head of the page and both of those are where the JavaScript needs to run before the page starts to display.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Nov 2012
    Location
    Canada
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts
    the HTML code for the button must exist before the JavaScript can find it.
    That makes sense.


  •  

    Tags for this Thread

    Posting Permissions

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