<html>
<head>
<title>Element addEventListener Multiple Times - RJM Programming - June, 2022</title>
<style>
td {
width:31%;
height:31vh;
text-align:center;
}
</style>
<script type='text/javascript'>
var fnum=0;
var bcols=['#ffffff'];
var icols=[''];
var thirty=1;

function ael_more(iois) {
var tag=null;
fnum++;
if (fnum > thirty) {
tag = document.createElement('script');
tag.type='text/javascript';
tag.innerHTML=' function ev' + fnum + '() { document.getElementById(icols[' + fnum + ']).style.backgroundColor=bcols[' + fnum + ']; setTimeout(ev' + fnum + ', 3000); } ';
document.head.appendChild(tag);
thirty=fnum;
}
bcols.push(iois.value);
icols.push(iois.id.replace('i','td'));
//document.getElementById(iois.id.replace('i','td')).addEventListener("click", eval("ev" + fnum + '()'));
document.getElementById(iois.id.replace('i','td')).addEventListener("click", window["ev" + fnum + '']);
document.getElementById(iois.id.replace('i','td')).click();
}

function ev1() {
document.getElementById(icols[1]).style.backgroundColor=bcols[1];
setTimeout(ev1, 3000);
}

function moreevs() {
var tag=null;
for (var i=2; i<=30; i++) {
tag = document.createElement('script');
tag.type='text/javascript';
tag.innerHTML=' function ev' + i + '() { document.getElementById(icols[' + i + ']).style.backgroundColor=bcols[' + i + ']; setTimeout(ev' + i + ', 3000); } ';
document.head.appendChild(tag);
}
thirty=30;
}

function toggle(ao) {
var inps=document.getElementsByTagName('input');
for (var jnps=0; jnps<inps.length; jnps++) {
if (ao.innerHTML == '-') {
inps[jnps].style.display='none';
} else if (ao.innerHTML == '+') {
inps[jnps].style.display='block';
}
}
if (ao.innerHTML == '-') {
ao.innerHTML='+';
ao.title="Show colour pickers.";
} else if (ao.innerHTML == '+') {
ao.innerHTML='-';
ao.title="Hide colour pickers.";
}
}

</script>
</head>
<body onload='moreevs();'>
<table style='width:100%;height:100vh;' border=10>
<tr>
<td id=td11><input onchange=ael_more(this); type=color id=i11 value='#ffffff'></input></td>
<td id=td12><input onchange=ael_more(this); type=color id=i12 value='#ffffff'></input></td>
<td id=td13><input onchange=ael_more(this); type=color id=i13 value='#ffffff'></input></td>
</tr>
<tr>
<td id=td21><input onchange=ael_more(this); type=color id=i21 value='#ffffff'></input></td>
<td id=td22><input onchange=ael_more(this); type=color id=i22 value='#ffffff'></input><h2>Element addEventListener Multiple Times</h2><h3>RJM Programming <a title="Hide colour pickers." style="text-decoration:underline;cursor:pointer;" onclick="toggle(this);">-</a> June, 2022</h3><h4>Change cell colours how ever many times</h4></td>
<td id=td23><input onchange=ael_more(this); type=color id=i23 value='#ffffff'></input></td>
</tr>
<tr>
<td id=td31><input onchange=ael_more(this); type=color id=i31 value='#ffffff'></input></td>
<td id=td32><input onchange=ael_more(this); type=color id=i32 value='#ffffff'></input></td>
<td id=td33><input onchange=ael_more(this); type=color id=i33 value='#ffffff'></input></td>
</tr>
</table>
</body>
</html>