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";
    
  var event; // The custom event that will be created

  if (document.createEvent) {
    event = document.createEvent("HTMLEvents");
    event.initEvent("change", true, true);
  } else {
    event = document.createEventObject();
    event.eventType = "change";
  }

  event.eventName = "change";

  if (document.createEvent) {
    element.dispatchEvent(event);
  } else {
    element.fireEvent("on" + event.eventType, event);
  }
    
}
</script>
</head>
<BODY>
<input type="text" class="search-box" placeholder="Player Search">
<br \>
<button type="button" onclick="addTextCallListener()">Click Me!</button>
</BODY>
</HTML>