JSFiddle - React, Tailwind, and code Playground

by Joseph Fedor

HTML

<HTML>
<head>
<script type="text/javascript">
window.onload= function () {
    if(window.addEventListener) {
        document.getElementsByClassName('search-box')[0].addEventListener('change', loadXMLDoc, false);
    } else if (window.attachEvent){
        document.getElementsByClassName('search-box')[0].attachEvent("change", loadXMLDoc);
    }

    function loadXMLDoc(){
       alert('It worked');
    }
}

function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
// Create the event
var event = new CustomEvent("change", { "detail": "Example of an event" });

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);    
    
}
</script>
</head>
<BODY>
<input type="text" class="search-box" placeholder="Player Search">
<br \>
<button type="button" onclick="addTextCallListener()">Click Me!</button>
</BODY>
</HTML>