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 15 of 15
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts

    simple use of 'this' to change color has a quirk

    i have been going backwards in my understanding. everytime i get stumped i decide to go further back and make sure i understood a basic concept.

    this simple code doesn't run correctly. it is supposed to change the button background color when it is clicked. and it does, but not for the first click. the second and third and fourth (looped back) work just as advertised, but not the first. it doesn't matter which button i pick first, it won't change.

    what am i doing wrong ?

    Code:
    <!doctype html>
    <html lang="en">
    
    <head>
    	<title>Slides Show 1</title>
    	<meta charset='utf-8' />
    	<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    	
    	<style type="text/css">	</style>
    </head>
    
    <body>
    
    
    <button id="aa" class="bet" style="background-color:green;" onclick="checkV()">B1 =</button>
    <button id="bb" class="bet" style="background-color:green;" onclick="checkV()">B2 =</button>
    <button id="cc" class="bet" style="background-color:green;" onclick="checkV()">B3 =</button>
    
    <script>v1="C", v2="D"</script>
    
    
    <script>
     $(document).ready(function()
     {
      /*  alert(v1);  */
     });
     </script>
    
    <script>
    function checkV(){
     /*  alert(v2);  */
    	$("button.bet").click(function() {
    $(this).css("background-color","red");
    });
    };
    </script>
    Last edited by pratto; 04-26-2013 at 05:13 AM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    look at the order that things happen:

    first button click:
    1. checkV function called
    2. click listener applied to button

    end.

    next button click
    1. checkV function called
    2. click listener picks up click, changes color

    end

    all you really need is this:
    Code:
    <button id="aa" class="bet" style="background-color:green;" >B1 =</button>
    <button id="bb" class="bet" style="background-color:green;" >B2 =</button>
    <button id="cc" class="bet" style="background-color:green;" >B3 =</button>
    
    <script>
    
    $("button.bet").click(function() {
    $(this).css("background-color","red");
    });
    
    </script>

  • #3
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thank you. i take it that, everything between script tags is read by the browser on page load, and global variables are assigned, and event listeners are assigned. therefor it is not necessary to call a function to assign an event listener.

    see, when someone shows me the way, i am not bad at turning around and recapitulating how we got here. your help is appreciated.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Yes, but it *ONLY* works like that if your <script> is *AFTER* the HTML elements in question, as shown by Xelawho.

    If the script is placed in the <head>, before the HTML elements it is meant to address, then it can't be executed until after the page is loaded, which is why you see all those document.ready things in jQuery or window.onload in vanilla JavaScript.

    Speaking of which: All your questions seem to be about jQuery, not ordinary JavaScript, so you might be better off posting in the jQuery forum. Or start learning vanilla JavaScript.

    For example:
    Code:
    <button id="aa" class="bet" style="background-color:green;" >B1 =</button>
    <button id="bb" class="bet" style="background-color:green;" >B2 =</button>
    <button id="cc" class="bet" style="background-color:green;" >B3 =</button>
    
    <script>
    var btns = document.getElementsByClassName("bet");
    for ( var b = 0; b < btns.length; ++b )
    {
        btns[b].onclick = function() { this.style.backgroundColor="red"; }
    }
    </script>
    Yes, that's what the jQuery code is actually doing, behind the scenes.
    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
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by Old Pedant View Post
    Yes, that's what the jQuery code is actually doing, behind the scenes.
    (kind of)


  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Okay, given the jQuery
    Code:
    $("button.bet").click(function() { .. }
    It's probably actually doing something closer to:
    Code:
    var btns = document.getElementsByTagName("button");
    for ( var b = 0; b < btns.length; ++b )
    {
        var btn = btns[b];
        if ( btn.className.match(/\bbet\b/) ) 
        {
            addEvent(btn,"click",function() { this.style.backgroundColor = 'red'; } );
        }
    }
    Where addEvent is written to use either addEventListener or attachEvent depending on the browser in use.

    Is that better?
    Last edited by Old Pedant; 04-26-2013 at 08:51 PM.
    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.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    Is that better?
    Either of your versions is better if that's all the JavaScript that the page needs as it is well under 1% of the amount of code that jQuery would be loading into the page most of which would not even be used. Only if the page has a lot of other JavaScript calls to the JQuery library would jQuery be better.
    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.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by Old Pedant View Post
    Okay, given the jQuery
    Code:
    $("button.bet").click(function() { .. }
    It's probably actually doing something closer to:
    Code:
    var btns = document.getElementsByTagName("button");
    for ( var b = 0; b < btns.length; ++b )
    {
        var btn = btns[b];
        if ( btn.className.match(/\bbet\b/) ) 
        {
            addEvent(btn,"click",function() { this.style.backgroundColor = 'red'; } );
        }
    }
    Or probably just using document.querySelectorAll('button.bet') which most of the browsers support (even IE8!) and then fall back to getElementsByTagName as needed.

    http://caniuse.com/queryselector

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Quote Originally Posted by glenngv View Post
    Or probably just using document.querySelectorAll('button.bet') which most of the browsers support (even IE8!) and then fall back to getElementsByTagName as needed.
    I dunno. I would expect querySelectorAll to be a lot slower than getElementsByTagName, since it has so much more to search. But I could easily be wrong since presumably both are coded in native code.
    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.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by felgall View Post
    Either of your versions is better if that's all the JavaScript that the page needs as it is well under 1% of the amount of code that jQuery would be loading into the page most of which would not even be used. Only if the page has a lot of other JavaScript calls to the JQuery library would jQuery be better.
    I think Old Pedant's question "Is it better?" is referring to where if his vanilla Javascript version is better or closer to what jQuery is doing behind the scenes as compared to his initial version. Not if jQuery is better to use than vanilla Javascript.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Quote Originally Posted by glenngv View Post
    I think Old Pedant's question "Is it better?" is referring to where if his vanilla Javascript version is better or closer to what jQuery is doing behind the scenes as compared to his initial version. Not if jQuery is better to use than vanilla Javascript.
    <grin>Exactly</grin>

    I was indeed replying to Xelawho's mildly snide "kind of" comment. Just for fun.
    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.

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    It wasn't snide. Or wasn't meant to be, anyway - there are two fundamental differences between the code you posted in #4 and #6, but both do the same thing. Kind of.

    fwiw, my understanding of jQuery is that it tests for getElementsByClassName first and then does... something... if it doesn't find it.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Oh, I didn't take it unkindly, at all! I understood what you were saying, and you were right. jQuery would clearly do the search for button first (if it didn't use querySelectorAll, as suggested by Glenn) if for no other reason that there might be other non-button elements with the same classname. I admit I was sloppy, and you caught me. "Snide" is a poor choice of words on my part; "chide" would be better.
    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! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by Old Pedant View Post
    jQuery would clearly do the search for button first
    CSS selectors are parsed by browser from right to left. And jQuery does the same too.

    http://net.tutsplus.com/tutorials/ja...t-with-jquery/
    http://stackoverflow.com/questions/5...-right-to-left

  • Users who have thanked glenngv for this post:

    Old Pedant (04-27-2013)

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    WOW! That seems counterintuitive to me. But thanks for the info. Will keep it in mind.
    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
    •