{"id":56231,"date":"2022-06-25T03:01:41","date_gmt":"2022-06-24T17:01:41","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56231"},"modified":"2022-06-25T15:16:20","modified_gmt":"2022-06-25T05:16:20","slug":"multiple-addeventlistener-logics-for-html-elements-ondblclick-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/multiple-addeventlistener-logics-for-html-elements-ondblclick-tutorial\/","title":{"rendered":"Multiple addEventListener Logics for HTML Elements Ondblclick Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ael_multi.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multiple addEventListener Logics for HTML Elements Ondblclick Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ael_multi_odc.jpg\" title=\"Multiple addEventListener Logics for HTML Elements Ondblclick Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Multiple addEventListener Logics for HTML Elements Ondblclick Tutorial<\/p><\/div>\n<p>In yesterday&#8217;s <a title='Multiple addEventListener Logics for HTML Elements Primer Tutorial' href='#mellhtmlept'>Multiple addEventListener Logics for HTML Elements Primer Tutorial<\/a>&#8216;s &#8220;function ael_more&#8221; you may have noticed <a href='#winway'>the codeline<\/a> &#8230;<\/p>\n<p><code><br \/>\n     document.getElementById(iois.id.replace('i','td')).addEventListener(\"click\", window[\"ev\" + fnum + '']);<br \/>\n<\/code><\/p>\n<p> &#8230; we use to set up the <font size=1>[element].<\/font><a target=_blank title='HTML DOM Element addEventListener() information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_addeventlistener.asp'>addEventListener<\/a> means by which we add &#8220;onclick&#8221; event code logic when it is an event total larger than thirty, in the &#8220;totally dynamic&#8221; scenario.  The alternative to <i>eval<\/i> second parameter <i>window[&#8216;ele-ID&#8217;]<\/i> idea we got helped out with via <a target=_blank href='https:\/\/stackoverflow.com\/questions\/65621481\/javascript-addeventlistener-from-a-given-function-string-name-as-an-argument' title='Useful link, thanks'>this very useful link<\/a>, thanks.<\/p>\n<p>We need this methodology, too, with today&#8217;s improvements, namely &#8230;<\/p>\n<ul>\n<li>allow &#8220;ondblclick&#8221; of (table) cell logic to cause a Javascript prompt popup allow the user to personalize their own event logic via &#8230;\n<ol>\n<li>event logic itself<\/li>\n<li>event type<\/li>\n<li>if &#8220;onclick&#8221;, the interval in milliseconds, between recalled logic<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; so that the first double click on cell td12 with user entry &#8230;<\/p>\n<blockquote><p>\n  console.log(new Date()); evtt=&#8221;onmouseover&#8221;;\n<\/p><\/blockquote>\n<p> &#8230; would set in play &#8230;<\/p>\n<p><code><br \/>\n  document.getElementById('td12').addEventListener(\"mouseover\", window['dc1'], false);<br \/>\n<\/code> <\/p>\n<p> &#8230; calling on a dynamically created &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n   function dc1() {<br \/>\n      var threet=3000;<br \/>\n      var evtt=\"onclick\";<br \/>\n      console.log(new Date());<br \/>\n      evtt=\"onmouseover;\"<br \/>\n      if (evtt == \"onclick\") {  setTimeout(dc1, threet);  }<br \/>\n   }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; called into play only when the user hovers over the (table) cell &#8220;td12&#8221; &#8230;<\/p>\n<p><code><br \/>\n   function yourevent(evt) {<br \/>\n     var oev='';<br \/>\n     var mtrdo=evt.target;<br \/>\n     var tag=null;<br \/>\n     ffnum++;<br \/>\n     tag = document.createElement('script');<br \/>\n     tag.type='text\/javascript';<br \/>\n     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 seconds 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; } ';<br \/>\n     document.head.appendChild(tag);<br \/>\n     if (tag.innerHTML.replace('var evtt=\"onclick\"', '').replace(\/\\ evtt\\ \\=\/g,' evtt=').replace(\/\\ evtt\\=\\ \/g,' evtt=').split(' evtt=\"on').length &gt; 1) {<br \/>\n     oev=(tag.innerHTML.replace('var evtt=\"onclick\"', '').replace(\/\\ evtt\\ \\=\/g,' evtt=').replace(\/\\ evtt\\=\\ \/g,' evtt=').split(' evtt=\"on')[1].split('\"')[0]).toLowerCase();<br \/>\n     mtrdo.addEventListener(oev, window[\"dc\" + ffnum + ''], false);<br \/>\n     } else {<br \/>\n     mtrdo.addEventListener(\"click\", window[\"dc\" + ffnum + '']);<br \/>\n     mtrdo.click();<br \/>\n     }<br \/>\n   }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ael_multi.html--GETME\" title=\"ael_multi.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ael_multi.html--GETME\" title=\"ael_multi.html\">&#8220;proof of concept&#8221; ael_multi.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ael_multi.htm\" title=\"Click picture\">improved cell multiple background colour controller<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/multiple-addeventlistener-logics-for-html-elements-ondblclick-tutorial\/'>Multiple addEventListener Logics for HTML Elements Ondblclick Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mellhtmlept'>Previous relevant <a target=_blank title='Multiple addEventListener Logics for HTML Elements Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/multiple-addeventlistener-logics-for-html-elements-primer-tutorial\/'>Multiple addEventListener Logics for HTML Elements Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ael_multi.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multiple addEventListener Logics for HTML Elements Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ael_multi.jpg\" title=\"Multiple addEventListener Logics for HTML Elements Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Multiple addEventListener Logics for HTML Elements Primer Tutorial<\/p><\/div>\n<p>The dynamic creation of event logic associated with webpage HTML elements is a powerful tool for making your webpages dynamic.<\/p>\n<p>In the case of the great <font size=1>[element].<\/font><a target=_blank title='HTML DOM Element addEventListener() information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_addeventlistener.asp'>addEventListener<\/a> means by which you can make this happen, there is a great feature that goes &#8230;<\/p>\n<blockquote><p>\nIf you can swing it that the second &#8220;function&#8221; parameter to <font size=1>[element].<\/font>addEventListener is unique and just a straight simple function object reference you can pile on multiple same-type event logics onto the one HTML element\n<\/p><\/blockquote>\n<p>We wanted to combine that premise with a dynamic user entered &#8220;data item&#8221; into that mix, in our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ael_multi.html-GETME\" title=\"ael_multi.html\">&#8220;proof of concept&#8221; ael_multi.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ael_multi.html\" title=\"Click picture\">cell multiple background colour controller<\/a> web application for you, today.  This means creating a discrete &#8220;not existing beforehand&#8221; Javascript function on the fly.  Yes, <font color=blue>we can do that<\/font> via &#8230;<\/p>\n<p><code><br \/>\n   var thirty=1;<br \/>\n   var bcols=['#ffffff'];<br \/>\n   var icols=[''];<br \/>\n<br \/>\n   function moreevs() {<br \/>\n     var tag=null;<br \/>\n     for (var i=2; i<=30; i++) {\n      <font color=blue>tag = document.createElement('script');<br \/>\n      tag.type='text\/javascript';<br \/>\n      tag.innerHTML=' function ev' + i + '() { document.getElementById(icols[' + i + ']).style.backgroundColor=bcols[' + i + '];  setTimeout(ev' + i + ', 3000);  } ';<br \/>\n      document.head.appendChild(tag);<\/font><br \/>\n     }<br \/>\n     thirty=30;<br \/>\n   }<br \/>\n<br \/>\n   function ev1() {<br \/>\n      document.getElementById(icols[1]).style.backgroundColor=bcols[1];<br \/>\n      setTimeout(ev1, 3000);<br \/>\n   }<br \/>\n<\/code><\/p>\n<p> &#8230; but how do we get the proper <font size=1>[element].<\/font><a target=_blank title='HTML DOM Element addEventListener() information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_addeventlistener.asp'>addEventListener<\/a> call into the mix?  This was a &#8220;first time&#8221; usage for us <font color=blue>as per the <a title=\"Javascript eval\" href=\"http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp\" target=\"_blank\">eval<\/a> inspired<\/font> &#8230;<\/p>\n<p><code><br \/>\n   var fnum=0;<br \/>\n<br \/>\n   function ael_more(iois) {<br \/>\n     var tag=null;<br \/>\n     var eok=true;<br \/>\n     fnum++;<br \/>\n     if (fnum > thirty) {<br \/>\n      tag = document.createElement('script');<br \/>\n      tag.type='text\/javascript';<br \/>\n      tag.innerHTML=' function ev' + fnum + '() { document.getElementById(icols[' + fnum + ']).style.backgroundColor=bcols[' + fnum + '];  setTimeout(ev' + fnum + ', 3000);  } ';<br \/>\n      document.head.appendChild(tag);<br \/>\n      thirty=fnum;<br \/>\n      eok=false;<br \/>\n     }<br \/>\n     bcols.push(iois.value);<br \/>\n     icols.push(iois.id.replace('i','td'));<br \/>\n     if (eok) {<br \/>\n     <font color=blue>document.getElementById(iois.id.replace('i','td')).addEventListener(\"click\", eval(\"ev\" + fnum + '()'));<\/font><br \/>\n     } else {<br \/>\n     <font color=black id=winway>document.getElementById(iois.id.replace('i','td')).addEventListener(\"click\", window[\"ev\" + fnum + '']);<\/font><br \/>\n     }<br \/>\n     document.getElementById(iois.id.replace('i','td')).click();<br \/>\n   }<br \/>\n<\/code><\/p>\n<p> &#8230; you can see in <font size=1>(perhaps animated)<\/font> action below, where the user chooses background colours from the colour picker elements shown &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ael_multi.html\" style=\"width:100%;height:900px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56222' onclick='var dv=document.getElementById(\"d56222\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56222' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56231' onclick='var dv=document.getElementById(\"d56231\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ondblclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56231' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In yesterday&#8217;s Multiple addEventListener Logics for HTML Elements Primer Tutorial&#8216;s &#8220;function ael_more&#8221; you may have noticed the codeline &#8230; document.getElementById(iois.id.replace(&#8216;i&#8217;,&#8217;td&#8217;)).addEventListener(&#8220;click&#8221;, window[&#8220;ev&#8221; + fnum + &#8221;]); &#8230; we use to set up the [element].addEventListener means by which we add &#8220;onclick&#8221; event &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/multiple-addeventlistener-logics-for-html-elements-ondblclick-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,14,37],"tags":[2978,84,2682,1580,2539,3609,354,1549,399,400,471,576,652,3373,1830,861,1666,997,1319,1583],"class_list":["post-56231","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-addeventlistener","tag-animation-2","tag-background-colour","tag-cell","tag-createelement","tag-document-createelement","tag-dom","tag-element","tag-eval","tag-event","tag-function","tag-html","tag-javascript","tag-logic","tag-method","tag-onclick","tag-ondblclick","tag-programming","tag-tutorial","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56231"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=56231"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56231\/revisions"}],"predecessor-version":[{"id":56243,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56231\/revisions\/56243"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}