JSFiddle - React, Tailwind, and code Playground

by claykaboom

HTML

<div id="ChatBox">
  CHAT BOX DIV
</div>
<div id="LastMessageStatus">
  LAST MESSAGE DIV
</div>

<button onclick="a('The Message', 'userName')">
Click me to send the message
</button>

JavaScript

function GetXmlHttpObject() {
  var xmlHttp = null;
  try {
    // Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  } catch (e) {
    // Internet Explorer
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  return xmlHttp;
}

function FetchMessages() {
  setInterval(function() {
    getChatMessages();
  }, 2000)
}
FetchMessages();
var xmlHttp;

function getChatMessages() {
  xmlHttp = GetXmlHttpObject();
  if (xmlHttp == null) {
    alert("Browser does not support HTTP Request");
    return;
  }
  var url = "/echo/json/";
  //url=url+"?q="+str;
  //url=url+"&sid="+Math.random();
  xmlHttp.onreadystatechange = stateChanged;
  xmlHttp.open("GET", url, true);
  xmlHttp.send(null);

}

function stateChanged() {
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
    document.getElementById("ChatBox").innerHTML = xmlHttp.responseText;
  }
} 
function a()
{alert('oi')}
function SendMessages(chatMessage, Username) {
 var xmlHttp2 = GetXmlHttpObject();
  if (chatMessage.length == 0) {
    return;
  } else {
    var url2 = "/echo/json/";
    url2 = url2 + "?chatMessage=" + chatMessage;
    url2 = url2 + "&username=" + Username;
    xmlHttp2.onreadystatechange = stateChangedt;
    xmlHttp2.open("GET", url2, true);
    xmlHttp2.send(null);
  }
}

function stateChangedt() {
  if (xmlHttp2.readyState == 4 || xmlHttp2.readyState == "complete") {

    if (xmlHttp2.responseText == "Done") {
      document.getElementById("LastMessageStatus").innerHTML = "<font color='green'>Sent</font>";
    }
  }
}