JSFiddle - React, Tailwind, and code Playground

custom get element

by Dave

HTML

<div class="myElement" id="myElement">Click Me</div>
<div class="myElement">Click Me Too</div>
<input type="button" value="azzz" onclick="xx()">
<table class="myElement"><tr><td>aaaa</td><td>bbbb</td></tr></table>

CSS

.myElement {
    background-color:blue;
    cursor:pointer;
    text-align:center;
    line-height: 40px;
    padding: 6px; border-radius: 4px;
    width: 50%;
    margin: auto;
    color:white;
}
html, body {
    text-align:center;
}

JavaScript

window.onload = function () {

foo('myElement','click',) 

}
function foo(a,b,c){
//qq = function (e) {if( e.srcElement.className == a ) {alert(e.srcElement.innerHTML)}}
var d;
if (b=='mouseover'){d='mousemove'}
else{
d='mouseover'
}
document.body.addEventListener( d, function (e) {
/*
function imgClick(e) {  
//alert(this.innerHTML);
return (e.srcElement.onclick = function() { alert(this.innerHTML) });
}
if (b=='click'){ e.srcElement.addEventListener("click", imgClick, false); }
*/
var qqq = e.srcElement.className
if( qqq == a ) {
//alert('')
//if (b=='click'){ e.srcElement.removeEventListener("click", function() { alert(this.innerHTML) }, false); }
//e.stopPropagation();e.preventDefault();
if (b=='click'){ e.srcElement.onclick = function() { alert(this.innerText) } }
}



});

}


function xx(){
var newDiv = document.createElement('div')
newDiv.style.position = 'absolute'
newDiv.class = 'myElement'
newDiv.innerHTML = '<a class="myElement">hello</a>'
//etc.
document.body.append(newDiv)
}

//window
function zzz(a,b,c){
document.querySelectorAll(a).forEach(function(el){
//el.removeEventListener(b, c);//may not need this
el.addEventListener(b, c)
});//event.stopPropagation()
}

//zzz( '.myElement','click', function() { alert(this.innerText) } );