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" class="search-form" 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 class="sbutton" id="search-image" style="border:0; vertical-align: top;background: transparent;"><i class="fa fa-search"></i></button>
</fieldset>
</form>
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)
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" class="sbutton" id="search-image" style="border:0; vertical-align: top;background: transparent;"><i class="fa fa-search"></i></button>
js :
button.addEventListener("click",SendData)