JSFiddle - React, Tailwind, and code Playground

by snover

HTML

<select id='the_select' onchange='handler(arguments[0])'>
    <option value=''>empty</option>
    <option value='a'>Hello</option>
    <option value='b'>Banana</option>
    <option value='c'>Chicago</option>
    <option value='d'>Wednesday</option>
    
</select>
<div id='box'></div>

CSS

#box { width: 500px; height: 400px; overflow: auto; border: 1px solid #aaa; }

JavaScript

function handler(ev) {
    ev = ev || event;
    var target = ev.target || ev.srcElement || null;
    show("handling event: type " + (ev ? ev.type : 'unknown') + ' target: ' + (target ? (target.id || target.name || target.tagName) : 'unknown'));
}


$(function() {
    $('#the_select').change(function() {
        show("the other change handler");
    });
});

var show = (function() {
    var txt = [];
    return function(msg) {
        txt.push(new Date().getTime() + " " + msg);
        document.getElementById('box').innerHTML = txt.join('<br>');
    };
})();