Script doesn't work when event is changed from "mouseover" to "click"-CodePudding

The following script doesn't work when I change the event to "click" instead of "mouseover". Any idea why? What I mean by doesn't work is, that I cant POST any JSON data to the JSON storage service.

<script>
const button = document.getElementById("search-image")
const s = document.getElementById("s")
function SendData(){

   var xhr = new XMLHttpRequest();
   var url = "https://krat.es/xxxxx";
   xhr.open("POST", url, true);
   xhr.setRequestHeader("Content-Type", "application/json");

   xhr.onreadystatechange = function () {

       if (xhr.readyState === 4 && xhr.status === 200) {

           var json = JSON.parse(xhr.responseText);

       }
   };

   var data = JSON.stringify({"Text": s.value});
   console.log(data)
   xhr.send(data);
}
button.addEventListener("mouseover",SendData)
</script>

Update: HTML code


<form _lpchecked="1" action="/search"  id="searchform" method="get">
<fieldset>
<input id="s" name="q" onfocus="if(this.value=='Search')this.value='';" onwebkitspeechchange="transcribe(this.value)" type="text" value="Search" x-webkit-speech="">
<button  id="search-image" style="border:0; vertical-align: top;background: transparent;"><i ></i></button>
</fieldset>
</form>

CodePudding user response：

You can replace mouseover with click and you need to type the text on search area and enter you will be able to get the response

button.addEventListener("click",SendData)

please refer below link for full code

CodePudding user response：

Your button is inside a form. So when you click the form button, it will be sent and will not allow your JavaScript code to run.
So change the button code this way

html :

/* type="button" */
    <button type="button"  id="search-image" style="border:0; vertical-align: top;background: transparent;"><i ></i></button>

js :

button.addEventListener("click",SendData)