SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    click event automatic executed :s

    hello guys,

    I have a problem with my script I have 2 event listeners with click events but when I load the page they are executed automatically

    here is my javascript code :
    Code JavaScript:
     
    window.addEventListener("load",init,false);
     
    function init()
    {
        var koopButton =document.getElementById("kopen");
        koopButton.addEventListener('click',alert("test"),false);
         var mandButton =document.getElementById("kopen");
        mandButton.addEventListener('click',document.location.href="basket.html",false);
     
    }
     
    var g_products = new Array();
    var g_cookiedays = 1;
    var g_havebasket = 0;
     
    function setAantal(guid, qty){
    	if (qty < 0) qty = 0;
    	if (!qty){
    		delete_cookie(guid+'_qty');
    	}else{
    		save_cookie(guid+'_qty', parseInt(qty), g_cookiedays);
    	}
    }
     
    function add_item(){
     var hoeveelheid=document.getElementById("hoeveel").value;
    // var titel=document.getElementById("titel").value;
    	setAantal("Test",hoeveelheid);
    	update_basket();
    }
     
    function save_cookie(name,value,days) {
    	if (days) {
    		var date = new Date();
    		date.setTime(date.getTime()+(24*60*60*1000));
    		var expires = "; expires="+date.toGMTString()
    	}
    	else expires = "";
    	document.cookie = name+"="+value+expires+"; path=/"
    }
    function delete_cookie(name) {
    	save_cookie(name, "", -1);
    }
     
    function add_product(guid, name, price){
        g_products[g_products.length] = new Array(guid, name, price);
    }
    function getAantal(guid){
    	var cookie = read_cookie(guid+'_qty');
    	if ((cookie != null) && (cookie != '')){
    		return parseInt(cookie);
    	}else{
    		return 0;
    	}
    }
     
    function replace_contents(node, newnode){
    	if (node.childNodes.length > 0){
    		node.replaceChild(newnode, node.childNodes[0]);
    	}else{
    		node.appendChild(newnode);
    	}
    }
     
     
    function update_basket(){
    	if (!g_havebasket) return;
     
    	var sub_total = 0;
     
    	// update product rows
    	for(var i=0; i<g_products.length; i++){
    		var product = g_products[i];
     
    		var guid = product[0];
    		var price = product[2];
    		var qty = getAantal(guid);
     
    		var total = price*qty;
    		sub_total += total;
    		var btw=0.21*total;
    		sub_total+=btw;
     
    		var row = document.getElementById('basket_row_'+guid);
    		row.style.display = (qty > 0)?'':'none';
     
    		// update qty
    		var input = document.getElementById('basket_input_'+guid);
    		input.value = qty;
     
    		// update total
    		replace_contents(row.childNodes[4], document.createTextNode(format_price(total+btw)));
     
    	}
     
    	 row = document.getElementById('basket_empty_row');
    	row.style.display = (sub_total > 0)?'none':'';
     
    	var cell = document.getElementById('basket_subtotal');
    	replace_contents(cell, document.createTextNode(format_price(sub_total)));
     
    	 row = document.getElementById('basket_checkout');
    	row.style.display = (sub_total > 0)?'':'none';
    }


    This is the html
    Code HTML4Strict:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="kopen.js" type="text/javascript"></script>
        <script src="products.js" type="text/javascript"></script>
        <title>Webshop DVD's</title>
    </head>
    <body>
    <div id="mand">
        <table>
            <tr>
                <td><a href="basket.html"><img src="basket.gif" width="21" height="10" border="0" alt="mand"/></a></td>
                <td><a href="basket.html"><span id="status"></span></a></td>
            </tr>
        </table>
    </div>
     
    <h1>My Shop</h1>
     
    <br/>
    <p>First Product:&euro;12.34</p>
    <br/>
    Test test test
     
    <label for="hoeveel">Aantal:</label><input type="text" id="hoeveel">
    <button type="submit" id="kopen">Aan Mandje Toevoegen</button>
    <button type="submit" id="bekijken">WinkelMandje Bekijken </button>
     
    <br/>
    </body>

    Any help please ?

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    koopButton.addEventListener('click',alert("test"),false);
    You are calling the alert in the assignment, Try

    Code:
     koopButton.addEventListener('click',function(){alert("test")},false);

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes I know but normaly it is koopButton.addEventListener('click',add_item,false);

    what you said worked .

    But why is that necessary with a function

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Alexander_003 View Post
    yes I know but normaly it is koopButton.addEventListener('click',add_item,false);

    what you said worked .

    But why is that necessary with a function
    add_item is a reference to the function, whereas when alert(...) is run you only get back from it undefined.

    If though you had a function called testAlert(), you would assign it to the event with just testAlert

    Code javascript:
    function testAlert() {
        alert(test);
    }
    koopButton.addEventListener('click', testAlert, false);

    If you don't want to reference an existing function, you can use an anonymous function there instead:

    Code javascript:
    koopButton.addEventListener('click', function () {
        alert(test);
    } ,false);

    In either case, you still end up with a function that is assigned to the event.
    Does that make any sense?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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