JSFiddle - React, Tailwind, and code Playground

by Andreas Renberg

HTML

<div id='blue' onclick='alert("blue clicked");'></div>
<div id='red' onClick='alert("red clicked");'></div>
<div id='green' ONCLICK='alert("green clicked");'></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.toString());
    
    // Print the function's code.
    // Note, how even after renaming the varaible (the reference) and dumping the "this" that it's bound to, the function name remains the same:
    var oc = target.onclick;
    console.log(oc.toString());
}

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