JSFiddle - React, Tailwind, and code Playground

by Andreas Renberg

HTML

<div id='blue' onclick='alert("blue clicked");' case="sensitive"></div>
<div id='red' onClick='alert("red clicked");' cAse="sensitive"></div>
<div id='green' ONCLICK='alert("green clicked");' CASE="SENSITIVE"></div>

CSS

div {
    width: 200px;
    height: 100px;
}
#red { background-color: red; }
#blue { background-color: blue; }
#green { background-color: green; }

JavaScript

function list(id) {
    var target = document.querySelector(id);
    console.log(id);
    console.log('   ', target.getAttribute('onclick'));
    console.log('   ', target.onclick);
    console.log('   ', target.onCLICK);
    //console.log('   ', target.onclick.toString());
    
    // Custom attributes
    console.log('   ', target.getAttribute('case'));
    //console.log('   ', target.case);
    console.log('   ', target.getAttribute('case') == "sensitive");
    
    //var oc = target.onclick;
    //console.log(oc.toString());
}

list('#blue');
list('#red');
list('#green');