<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, ffnum=0;
var bcols=['#ffffff'];
var icols=[''];
var thirty=1;
function ael_more(iois) {
var tag=null;
var eok=true;
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;
eok=false;
}
bcols.push(iois.value);
icols.push(iois.id.replace('i','td'));
if (eok) {
document.getElementById(iois.id.replace('i','td')).addEventListener("click", eval("ev" + fnum + '()'));
} else {
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.";
}
}
function yourevent(evt) {
var oev='';
var mtrdo=evt.target;
var tag=null;
ffnum++;
tag = document.createElement('script');
tag.type='text/javascript';
//tag.innerHTML=' function dc' + ffnum + '() { if (("" + event.target.id) != "' + mtrdo.id + '") { return false; } var evtt="onclick", threet=3000; ' + ('' + prompt('Enter event logic for this cell id=' + mtrdo.id + ' ( hosting colour picker id=' + mtrdo.id.replace('td','i') + ' and hosted by row id=' + mtrdo.id.substring(0,3).replace('td','tr') + ' and table id=mytable and body id=mybody ) which happens every 3000 milliseconds after your entry (though you can suffix event code by ... threet=6000; ... to make it after 6 seconds for instance and/or suffix by ... evtt="o' + 'nmousedown"; ... to make applicable event a non-onclick one ).','') + '; if (evtt == "onclick") { setTimeout(dc' + ffnum + ', threet); }').replace('null; if (evtt == "onclick") { setTimeout(dc' + ffnum + ', threet); }','').replace(/^\;\ if\ \(evtt\ \=\=\ \"onclick\"\)\ \{\ setTimeout\(dc\'\ \+\ ffnum\ \+\ \'\,\ threet\)\;\ \}/g,'').replace(';;',';').replace('};','}') + ' return true; } ';
tag.innerHTML=' function dc' + ffnum + '() { var evtt="onclick", threet=3000; ' + ('' + prompt('Enter event logic for this cell id=' + mtrdo.id + ' ( hosting colour picker id=' + mtrdo.id.replace('td','i') + ' and hosted by row id=' + mtrdo.id.substring(0,3).replace('td','tr') + ' and table id=mytable and body id=mybody ) which happens every 3000 milliseconds after your entry (though you can suffix event code by ... threet=6000; ... to make it after 6 seconds for instance and/or suffix by ... evtt="o' + 'nmousedown"; ... to make applicable event a non-onclick one ).','') + '; if (evtt == "onclick") { setTimeout(dc' + ffnum + ', threet); }').replace('null; if (evtt == "onclick") { setTimeout(dc' + ffnum + ', threet); }','').replace(/^\;\ if\ \(evtt\ \=\=\ \"onclick\"\)\ \{\ setTimeout\(dc\'\ \+\ ffnum\ \+\ \'\,\ threet\)\;\ \}/g,'').replace(';;',';').replace('};','}') + ' return true; } ';
document.head.appendChild(tag);
//alert(tag.innerHTML.replace('var evtt="onclick"', '').replace(/\ evtt\ \=/g,' evtt=').replace(/\ evtt\=\ /g,' evtt='));
if (tag.innerHTML.replace('var evtt="onclick"', '').replace(/\ evtt\ \=/g,' evtt=').replace(/\ evtt\=\ /g,' evtt=').split(' evtt="on').length > 1) {
oev=(tag.innerHTML.replace('var evtt="onclick"', '').replace(/\ evtt\ \=/g,' evtt=').replace(/\ evtt\=\ /g,' evtt=').split(' evtt="on')[1].split('"')[0]).toLowerCase();
//alert(mtrdo.id + ' ... ' + oev); //tag.innerHTML.replace('var evtt="onclick"', '').replace(/\ evtt\ \=/g,' evtt=').replace(/\ evtt\=\ /g,' evtt=').split(' evtt="on')[1].split('"')[0]);
mtrdo.addEventListener(oev, window["dc" + ffnum + ''], false);
} else {
mtrdo.addEventListener("click", window["dc" + ffnum + '']);
mtrdo.click();
}
}
</script>
</head>
<body id=mybody onload='moreevs();'>
<table id=mytable style='width:100%;height:100vh;' border=10>
<tr id=tr1>
<td title='Double click to define your own onclick behaviour for this cell' id=td11 ondblclick='yourevent(event);'><input onchange=ael_more(this); type=color id=i11 value='#ffffff'></input></td>
<td title='Double click to define your own onclick behaviour for this cell' id=td12 ondblclick='yourevent(event);'><input onchange=ael_more(this); type=color id=i12 value='#ffffff'></input></td>
<td title='Double click to define your own onclick behaviour for this cell' id=td13 ondblclick='yourevent(event);'><input onchange=ael_more(this); type=color id=i13 value='#ffffff'></input></td>
</tr>
<tr id=tr2>
<td title='Double click to define your own onclick behaviour for this cell' id=td21 ondblclick='yourevent(event);'><input onchange=ael_more(this); type=color id=i21 value='#ffffff'></input></td>
<td title='Double click to define your own onclick behaviour for this cell where this cell also contains elements with id myh2, myh3, mya, myh4' id=td22 ondblclick='yourevent(event);'><input onchange=ael_more(this); type=color id=i22 value='#ffffff'></input><h2 id=myh2>Element addEventListener Multiple Times</h2><h3 id=myh3>RJM Programming <a id=mya title="Hide colour pickers." style="text-decoration:underline;cursor:pointer;" onclick="toggle(this);">-</a> June, 2022</h3><h4 id=myh4>Change cell colours how ever many times</h4></td>
<td title='Double click to define your own onclick behaviour for this cell' id=td23 ondblclick='yourevent(event);'><input onchange=ael_more(this); type=color id=i23 value='#ffffff'></input></td>
</tr>
<tr id=tr3>
<td title='Double click to define your own onclick behaviour for this cell' id=td31 ondblclick='yourevent(event);'><input onchange=ael_more(this); type=color id=i31 value='#ffffff'></input></td>
<td title='Double click to define your own onclick behaviour for this cell' id=td32 ondblclick='yourevent(event);'><input onchange=ael_more(this); type=color id=i32 value='#ffffff'></input></td>
<td title='Double click to define your own onclick behaviour for this cell' id=td33 ondblclick='yourevent(event);'><input onchange=ael_more(this); type=color id=i33 value='#ffffff'></input></td>
</tr>
</table>
</body>
</html>