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 :


function init()
    var koopButton =document.getElementById("kopen");
     var mandButton =document.getElementById("kopen");

var g_products = new Array();
var g_cookiedays = 1;
var g_havebasket = 0;

function setAantal(guid, qty){
	if (qty < 0) qty = 0;
	if (!qty){
		save_cookie(guid+'_qty', parseInt(qty), g_cookiedays);

function add_item(){
 var hoeveelheid=document.getElementById("hoeveel").value;
// var titel=document.getElementById("titel").value;

function save_cookie(name,value,days) {
	if (days) {
		var date = new Date();
		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);
		return 0;

function replace_contents(node, newnode){
	if (node.childNodes.length > 0){
		node.replaceChild(newnode, node.childNodes[0]);

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;

		var row = document.getElementById('basket_row_'+guid); = (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'); = (sub_total > 0)?'none':'';

	var cell = document.getElementById('basket_subtotal');
	replace_contents(cell, document.createTextNode(format_price(sub_total)));

	 row = document.getElementById('basket_checkout'); = (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" "">
<html xmlns="" xml:lang="en" lang="en">
    <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>
<div id="mand">
            <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>

<h1>My Shop</h1>

<p>First Product:&euro;12.34</p>
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>


Any help please ?


You are calling the alert in the assignment, Try


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

function testAlert() {
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 () {
} ,false);

In either case, you still end up with a function that is assigned to the event.
Does that make any sense?