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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    38
    Thanked 0 Times in 0 Posts

    Splitting off JavaScript to a script area

    I am really new to JavaScript, and was following a tutorial that was using everything inline (probaby as its less confusing for the noob). Now I want to split it off into a script area, like my CSS has been.

    I have:
    Code:
    <SPAN onclick="document.getElementById('glance').style.display='block';document.getElementById('front').style.display='none';">
    Is something like this valid (this is a guess BTW)?
    Code:
    <SCRIPT type="text/javascript">
    
    	function getElementById('glance') {
    
    		.style.display='block';
    		}
    
    	function getElementById('front') {
    		.style.display='none';
    		}
    </SCRIPT>
    <SPAN onclick="document.getElementById('glance'); document.getElementById('front')"> ... </SPAN>
    ... or should function be document in the script area and document not be present in the SPAN attribute?

    ... Better yet, is there a way to put both the 'glance' and 'front' together like this:
    Code:
    <SCRIPT type="text/javascript">
    	function getElementById ('glance') {
    		.style.display='block';
    		getElementById ('front') { 
    			.style.display='none';
    		}
    	}
    </SCRIPT>
    Last edited by FlashDance; 10-02-2011 at 03:52 PM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    <span onclick="myFunction();">blah</span>
    <script type="text/javascript">
    function myFunction(){
    document.getElementById('glance').style.display='block';
    document.getElementById('front').style.display='none'
    }
    </script>
    there are alot of way to do this. my example is the simplest. One note: you should get in the habit of making your element tags lowercase <span> etc... certain doctypes require they be in lowercase to validate properly
    Last edited by DanInMa; 10-02-2011 at 04:16 PM.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    You seem to be very confused. You cannot give a function the same name as the id of an HTML element.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    weird i commented on that but it didnt save the edit

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by DanInMa View Post
    One note: you should get in the habit of making your element tags lowercase <span> etc... certain doctypes require they be in lowercase to validate properly
    I agree with you entirely - the World Wide Web Consortium (W3C) recommends lowercase tags in HTML 4, and demands lowercase tags in XHTML. For example, onMouseOver is an invalid attribute in XHTML, which requires use of onmouseover instead. But to be fair either works fine in HTML.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    38
    Thanked 0 Times in 0 Posts
    Thanks for the JavaScript tip.

    I am using upper case tags as I am using HTML 4.01. All elements should be upper case, where attributes lower case

    I've just plucked a random page out of the spec to show you - they are all upper:
    http://www.w3.org/TR/1999/REC-html40...ct/tables.html

    Elements (UPPER):
    http://www.w3.org/TR/1999/REC-html40.../elements.html

    Attributes (lower):
    http://www.w3.org/TR/1999/REC-html40...ttributes.html
    Last edited by venegal; 10-03-2011 at 01:55 PM.

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    38
    Thanked 0 Times in 0 Posts
    So, I built this code, and it doesn't work. Have I missed something?


    Code:
    <SCRIPT type="text/javascript">
    function selector('glancej') {
    document.getElementById('glance').style.display='block';
    document.getElementById('front').style.display='none';
    }
    function selector('frontj') {
    document.getElementById('glance').style.display='none';
    document.getElementById('front').style.display='block';
    }
    </SCRIPT>
    
    <SPAN onclick="selector('glancej');">GLANCE</SPAN>
    <SPAN onclick="selector('frontj');">FRONT</SPAN>
    
    <IMG alt="" class="glance" id="glance" src="glance.png">
    <IMG alt="" class="front" id="front" src="front.png">
    Last edited by venegal; 10-03-2011 at 01:56 PM. Reason: restored emptied posts

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    38
    Thanked 0 Times in 0 Posts
    I wrote this up and it doesn't work. Where have I stuffed up?

    Code:
    <SCRIPT type="text/javascript">
    	function selector('glancej') {
    		document.getElementById('glance') {style.display='block'};
    		document.getElementById('front') {style.display='none'};
    	}
    	function selector('frontj') {
    		document.getElementById('glance') {style.display='none'};
    		document.getElementById('front') {style.display='block'};
    	}
    </SCRIPT>
    
    <SPAN onclick="selector('glancej');">GLANCE</SPAN>
    <SPAN onclick="selector('frontj');">FRONT</SPAN>
    
    <IMG alt="" class="glance" id="glance" src="glance.png">
    <IMG alt="" class="front" id="front" src="front.png">
    Last edited by FlashDance; 10-03-2011 at 03:27 AM.

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    38
    Thanked 0 Times in 0 Posts
    Awesome. I figured it out. Solved!

    function glancej() {

    document.getElementById('glance').style.display='block';

    document.getElementById('front').style.display='none';

    }

    function frontj() {

    document.getElementById('glance').style.display='none';

    document.getElementById('front').style.display='block';


  •  

    Posting Permissions

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