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 14 of 14

Thread: Noob Question

  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Noob Question

    Hey, very new to JavaScript.
    Teaching myself as a hobby.

    Can anyone help me with cleaning this code up,
    It currently is working fine I just don't know how to shorten it.

    I've tried "if" statements and "loops" so far,
    possibly my syntax was wrong, but so far I haven't found a solution.

    Basically, I'm just trying to capture an event,
    and then change the image based on the event.
    I've got six different sets of three images as buttons.

    Thanks in advance.

    Code:
    function addListeners(){
    	document.getElementById('english_button').addEventListener("mouseover",myfuncE,false);
    	document.getElementById('english_button').addEventListener("mouseout",myfuncE,false);
    	document.getElementById('english_button').addEventListener("mousedown",myfuncE,false);
    	document.getElementById('english_button').addEventListener("mouseup",myfuncE,false);
    	
    	document.getElementById('german_button').addEventListener("mouseover",myfuncG,false);
    	document.getElementById('german_button').addEventListener("mouseout",myfuncG,false);
    	document.getElementById('german_button').addEventListener("mousedown",myfuncG,false);
    	document.getElementById('german_button').addEventListener("mouseup",myfuncG,false);
    	
    	document.getElementById('tagalog_button').addEventListener("mouseover",myfuncT,false);
    	document.getElementById('tagalog_button').addEventListener("mouseout",myfuncT,false);
    	document.getElementById('tagalog_button').addEventListener("mousedown",myfuncT,false);
    	document.getElementById('tagalog_button').addEventListener("mouseup",myfuncT,false);	
    	
    	document.getElementById('russian_button').addEventListener("mouseover",myfuncR,false);
    	document.getElementById('russian_button').addEventListener("mouseout",myfuncR,false);
    	document.getElementById('russian_button').addEventListener("mousedown",myfuncR,false);
    	document.getElementById('russian_button').addEventListener("mouseup",myfuncR,false);
    	
    	document.getElementById('spanish_button').addEventListener("mouseover",myfuncS,false);
    	document.getElementById('spanish_button').addEventListener("mouseout",myfuncS,false);
    	document.getElementById('spanish_button').addEventListener("mousedown",myfuncS,false);
    	document.getElementById('spanish_button').addEventListener("mouseup",myfuncS,false);
    	
    	document.getElementById('french_button').addEventListener("mouseover",myfuncF,false);
    	document.getElementById('french_button').addEventListener("mouseout",myfuncF,false);
    	document.getElementById('french_button').addEventListener("mousedown",myfuncF,false);
    	document.getElementById('french_button').addEventListener("mouseup",myfuncF,false);
    
    	function myfuncE(event){
    		if(event.type == "mouseover"){
    			this.src = 'English_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'English_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'English_03.jpg';
    		}
     		if(event.type == "mouseup"){
    			this.src = 'English_01.jpg';
    		}
    	}
    	function myfuncG(event){
    		if(event.type == "mouseover"){
    			this.src = 'German_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'German_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'German_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'German_01.jpg';
    		}
    	}
    	function myfuncT(event){
    		if(event.type == "mouseover"){
    			this.src = 'Tagalog_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'Tagalog_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'Tagalog_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'Tagalog_01.jpg';
    		}
    	}
    	function myfuncR(event){
    		if(event.type == "mouseover"){
    			this.src = 'Russian_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'Russian_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'Russian_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'Russian_01.jpg';
    		}
    	}
    	function myfuncS(event){
    		if(event.type == "mouseover"){
    			this.src = 'Spanish_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'Spanish_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'Spanish_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'Spanish_01.jpg';
    		}
    	}
    	function myfuncF(event){
    		if(event.type == "mouseover"){
    			this.src = 'French_02.jpg';
    		}
    		if(event.type == "mouseout"){
    			this.src = 'French_01.jpg';
    		}
    		if(event.type == "mousedown"){
    			this.src = 'French_03.jpg';
    		}
    		if(event.type == "mouseup"){
    			this.src = 'French_01.jpg';
    		}
    	}
    }
    window.onload = addListeners;
    Last edited by VIPStephan; 09-01-2013 at 01:30 AM. Reason: fixed closing code BB tag

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    As Sherlock Holmes would (not) say: "Elementary, my dear Watson."
    Code:
    function addListeners()
    {
        var langs = ["english","german","tagalog","russian","spanish","french"];
        for ( var i = 0; i < langs.length; ++ i )
        {
            var btn = document.getElementById(langs[i] + "_button");
            btn.addEventListener("mouseover",mouseIt,false);
            btn.addEventListener("mouseout",mouseIt,false);
            btn.addEventListener("mousedown",mouseIt,false);
            btn.addEventListener("mouseup",mouseIt,false);
        }
        function mouseIt(event) 
        {
            var lang = this.id.split("_")[0]; // part of id left of underline
            lang = lang.charAt(0).toUpperCase() + lang.substr(1); // english==>>English
            var picnum = "_01"; // for out and up both
            switch ( event.type )
            {
                case "mouseover" : picnum = "_02"; break;
                care "mousedown" : picnum = "_03"; break;
            }
            this.src = lang + picnum + ".jpg";
        }
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    lil_moe (08-31-2013)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Hmmm...we can do a tad better.
    Code:
    function addListeners()
    {
        var langs = ["english","german","tagalog","russian","spanish","french"];
        for ( var i = 0; i < langs.length; ++ i )
        {
            var btn = document.getElementById(langs[i] + "_button");
            btn.addEventListener("mouseover",mouseIt,false);
            btn.addEventListener("mouseout",mouseIt,false);
            btn.addEventListener("mousedown",mouseIt,false);
            btn.addEventListener("mouseup",mouseIt,false);
        }
        var translate = {
            mouseover  : "_02",
            mousesdown : "_03",
            mouseout   : "_01",
            mouseup    : "_01"
        };
        function mouseIt(event) 
        {
            var lang = this.id.split("_")[0]; // part of id left of underline
            lang = lang.charAt(0).toUpperCase() + lang.substr(1); // english==>>English
            this.src = lang + translate[event.type] + ".jpg";
        }
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    lil_moe (08-31-2013)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    I might point out that the hover (mouseover, mouseout) at least could be done with simple CSS, no need for JavaScript.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks a bunch.

    I had no idea I could define variables that way.
    Excellent!

    First example worked great.
    Still working on making second example work though. Hmmmm....

    Thanks again.

  • #6
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Nevermind....

    Got the second example working too...

    Thanks.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Quote Originally Posted by lil_moe View Post
    I had no idea I could define variables that way.
    Especially in the first example, there are no weirdly defined variables.

    The translate in the second example could be new to you, though.

    Ask if you don't understand what is going on in any of it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    By the by...

    Thinking about it, I doubt you need the onmouseup handler, at all.

    After all, for onmousedown to trigger, the user must first have moved the mouse over the button in question (thus already getting onmouseover). So now when you call onmouseup, the image reverts to "_01" but then should immediately change to "_02" because the mouse is still OVER the button. It won't finally revert to "_01" until the mouse moves out.

    Try it, just out of curiosity: Comment out the line
    Code:
            btn.addEventListener("mouseup",mouseIt,false);
    and see if it makes any difference.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Tried your suggestion.

    Turns out when you release the mouse button "mouseup" it will stay at _03,
    until you "mouseout". Strange....

    I did however realize from the experement that I should have "mouseup" set to _02,
    instead of _01.

    In regards to the translate variable, I am curious exactly what's happening there with the colon ":" and such. The rest makes sense though, just didn't realize you could do it in that way.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    That's just one of the many way of specifying object properties and values.

    This declaration:
    Code:
        var translate = {
            mouseover  : "_02",
            mousesdown : "_03",
            mouseout   : "_01",
            mouseup    : "_01"
        };
    is equivalent to this code:
    Code:
         var translate = [ ];
         translate["mouseover"] = "_02";
         translate["mousedown"] = "_03";
         translate["mouseout"] = "_01";
         translate["mouseup"] = "_01";
    which can also be written
    Code:
         var translate = new Object( );
         translate.mouseover = "_02";
         translate.mousedown = "_03";
         translate.mouseout = "_01";
         translate.mouseup = "_01";
    And then you hopefully can see that
    Code:
         var x = translate["mouseover"]
    and
         var x = translate.mouseover
    are also equivalent.

    Just another aspect of the flexibility of JavaScript objects.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    lil_moe (09-01-2013)

  • #11
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,342
    Thanks
    13
    Thanked 349 Times in 345 Posts
    Quote Originally Posted by Old Pedant View Post
    Code:
         var translate = [ ];
         translate["mouseover"] = "_02";
         translate["mousedown"] = "_03";
         translate["mouseout"] = "_01";
         translate["mouseup"] = "_01";
    should probably be:
    Code:
         var translate = { };
         translate["mouseover"] = "_02";
         translate["mousedown"] = "_03";
         translate["mouseout"] = "_01";
         translate["mouseup"] = "_01";
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #12
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This has really been a lot of help.

    For some reason the books and internet material I've been reading covers none of this stuff.

    I have no idea why.

    it's either the bare bare basics, or the expert stuff.
    Seems like there's nothing for the middle guy.
    And seems like everyone (that writes a book) has conspired to teach only one method,
    when clearly you've just showed me...5 different ways to accomplish a task.

    Sigh...

    I've been saying thanks a lot, but thanks again.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Quote Originally Posted by Dormilich View Post
    should probably be:
    Code:
         var translate = { };
         translate["mouseover"] = "_02";
         translate["mousedown"] = "_03";
         translate["mouseout"] = "_01";
         translate["mouseup"] = "_01";
    Yes, technically correct. Sorry. Though either one works for the purposes as used here.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    One good online resource is member Felgall's site:
    http://javascriptexample.net/

    He will teach you all I showed you and then a lot more. And all in the modern JS idiom, not in code from 15 years ago or more.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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