The on click event in the 70 line (ob.addEventListener("click",onCl1(idTable[0],idTable));) is being triggered without a reason. I have tried some other ways and it still reacts the same. I present the whole code as I think that it will be easier to find this bug:
JavaScript
x
117
117
1
<html>2
<body>3
<script>4
var table1 = ["1","2","1","2"];5
var rightMoves = 0;6
var wrongMoves = 0;7
8
function shuffle(array) {9
var currentIndex = array.length, temporaryValue, randomIndex;10
while (0 !== currentIndex) {11
randomIndex = Math.floor(Math.random() * currentIndex);12
currentIndex -= 1;13
temporaryValue = array[currentIndex];14
array[currentIndex] = array[randomIndex];15
array[randomIndex] = temporaryValue;16
}17
return array;18
}19
20
21
function printButtons(table1){22
shuffle(table1);23
var buttons = 0;24
var y,t,k,flag;25
var mybr = document.createElement('br');26
var idTable =["0","0","0","0"];27
var idT = 0;28
document.body.appendChild(mybr);29
for(var i =0 ; i<4; i++){30
y = document.createElement("button");31
t = document.createTextNode(table1[i]);32
for(var q =0; q<idT; q++){ // check if there is already a node with this id33
if(table1[i]==idTable[q]){34
k= table1[i]+"1";35
y.setAttribute("id",k);36
flag="true";37
}38
else{39
flag="false"; 40
} 41
}42
if(flag =="false"){43
y.setAttribute("id",table1[i]); 44
}45
idTable[idT]=table1[i];46
idT=idT + 1;47
y.appendChild(t);48
document.body.appendChild(y);49
50
buttons=buttons+1;51
52
if (buttons == 2) {53
buttons = 0;54
document.body.appendChild(document.createElement('br'));55
}56
57
}58
59
//menei na kalesw thn oncl1 gia to ka8e idtable 60
var ob = document.getElementById(idTable[0]); 61
var ob1 = document.getElementById(idTable[1]); 62
var ob2 = document.getElementById(idTable[2]); 63
var ob3 = document.getElementById(idTable[3]); 64
65
/*ob.onclick(onCl1(idTable[0],idTable));66
ob1.onclick(onCl1(idTable[1],idTable));67
ob2.onclick(onCl1(idTable[2],idTable));68
ob3.onclick(onCl1(idTable[3],idTable)); */69
70
//The problem is here71
ob.addEventListener("click",onCl1(idTable[0],idTable));72
73
74
75
}76
77
function onCl1(id1,idTable){78
var obj1 = document.getElementById(id1);79
obj1.disabled=true;80
var obj2,v,obj3,obj4;81
v=0;82
var temp = ["0","0","0"];83
for(var i =0 ; i<4 ; i++){84
if( id1 != idTable[i]){85
temp[v] = idTable[i];86
v=v+1;87
}88
}89
obj2=document.getElementById(temp[0]);90
obj2.onclick(onCl2(id1,temp[0]));91
obj3=document.getElementById(temp[1]);92
obj3.onclick(onCl2(id1,temp[1]));93
obj4=document.getElementById(temp[2]);94
obj4.onclick(onCl2(id1,temp[2]));95
96
}97
98
function onCl2(id1,id2){99
alert("fail");100
101
}102
103
</script>104
<div id="div1">105
<button type="button" onclick="printButtons(table1)">play</button>106
<br>107
</div>108
109
110
111
112
</body> 113
</html>114
115
116
117
Advertisement
Answer
It’s because you’re calling your event handler function instead of passing a function when you try to add the event listener.
JavaScript
1
2
1
ob.addEventListener("click", function() { onCl1(idTable[0],idTable); });2
Anytime you write functionName( argument, argument, ... ) the function will be called at that point in the code. That’s whats going on in your code; there are no magic rules for calls to addEventListener(). Thus you have to wrap your function call with your parameters in another function, and pass that function as the second argument.