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 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Unhappy Quick JavaScript Question

    This is the one basic code set that I can NEVER get right. Can anyone explain this:

    function init()

    {

    var buyinfobutton = $(".buyinfo");

    buyinfobutton.onclick = AddToCart;

    }

    onload = init;

    var shoppingcart = {};

    function AddToCart()

    {

    alert("hey");

    }


    When you click the corresponding button, it doesn't alert 'hey' (which is just there for testing purposes). I have Jquery working and everything, and I've checked my Id names... so why doesn't this work? Please help!!!!!!!!!!!!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    there is a fancy name for it, but basically you are mixing javascript with jQuery which you can get away with if you know what you are doing.

    Basically, this:
    Code:
    var buyinfobutton = $(".buyinfo")
    defines "buyinfobutton" as a jQuery object

    but this:

    Code:
    buyinfobutton.onclick = AddToCart;
    is javascript

    so either convert the jQuery object to a DOM element like this:
    Code:
    var buyinfobutton = $(".buyinfo")[0];
    or add a jQuery event listener like this:

    Code:
    var buyinfobutton = $(".buyinfo");
    
    buyinfobutton.on("click",AddToCart);
    (it could all be done much prettier, but I'm trying to stick as close to your original code as possible)

  • Users who have thanked xelawho for this post:

    zingzing45 (03-29-2013)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Smile

    Hmm.. thanks for this tip. I'll see if this works. Also, if you have a "prettier" way that you knew how to write it I would enjoy seeing it!

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    the jQuery way...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    
    <body>
    <input type="button" value="Buy!" class="buyinfo">
    
    <script type="text/javascript">
    $(document).ready(function() { //waits for DOM elements to be assembled before firing
    
    $(".buyinfo").on("click",function(){
    alert("hey");
    });
    
    });
    </script>
    </body>
    
    </html>
    javascript way...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    
    </head>
    
    <body>
    <input type="button" value="Buy!" class="buyinfo">
    
    <script type="text/javascript">
    var inps = document.getElementsByTagName("input");
    
    for (var i = 0; i < inps.length; i++) {
    if (inps[i].className=="buyinfo"){ // cross browser method necessary because your button doesn't have an ID 
    inps[i].onclick=AddtoCart;
    	}
    }
    
    function AddtoCart(){
    alert("hey")
    }
    </script>
    </body>
    
    </html>
    or more simply...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    
    <body>
    <input type="button" value="Buy!" onclick="AddtoCart()" class="buyinfo">
    
    <script type="text/javascript">
    function AddtoCart(){
    alert("hey")
    }
    </script>
    </body>
    
    </html>

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Xelawho: SURELY the "ready" stuff is not needed if you put the jQuery code *after* all the HTML, as you did there???? After all, you don't need window.onload when you put ordinary JS code at the bottom.

    Can't you just do essentially the same with jQuery??
    Code:
    <body>
    <input type="button" value="Buy!" class="buyinfo">
    
    <script type="text/javascript" src="...jquery.js"></script>
    <script type="text/javascript">
    $(".buyinfo").on("click",function(){ alert("hey"); });
    </script>
    </body>
    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.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Correct. But jQuery people seem to have some sort of fascination for putting their script in the <head> (probably because lots of the examples in the early documentation was written that way) and being that it doesn't hurt...

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Cool

    Well I put all my scripts in a completely different file...

  • #8
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by xelawho View Post
    or more simply...
    Looks more simple, yes, but it should at least be noted that it is generally considered good practice to not mix HTML and JavaScript, i.e. don't write the js functions you want to call into your markup.


  •  

    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
    •