Click event automatic executed :s

JavaScript
1

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 :



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


<?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

koopButton.addEventListener(‘click’,alert(“test”),false);

You are calling the alert in the assignment, Try

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

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

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


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:


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?