如何将事件监听器添加到 xmlhttp ajax 请求

Question

I'm trying to add an event listener to the output I get from my xmlhttp AJAX request, in this example I get a button after a successful ajax request but when I click on the button , the eventlistener I have set does not trigger the 'myfunction()' to show an alert

index.html

 <div id="list"><p></p></div>

script

function myFunction() {
alert("Hello! I am an alert box!");
}

function getdata() {

    var o = new XMLHttpRequest();
    (o.timeout = 3e4),
        (o.onload = function () {
            document.getElementById("list").innerHTML = this.responseText;
             
            
        }),
        o.open("GET", "view.php", !0),
        (o.ontimeout = function () {
            document.getElementById("list").innerHTML = '<b>Time out, please check your Internet 
 connection or </b><br><input type="button" class="retry" value="RETRY" onclick="getdata()">';
        }),
        o.send(),
        (document.getElementById("list").innerHTML = '<b>FETCHING RESULTS</b><div class="loader"> 
</div>');
    
        
}

}
document.getElementById("mybutton").addEventListener("click", myFunction);

view.php

<button class="nput" id="mybutton"> click me</button>

Answer 1

Your code is so badly formatted... Here you can find a working example on how to use the XMLHttpRequest events:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/load_event

The Mozilla documentation ( https://developer.mozilla.org ) is an excellent source of knowledge about JavaScript, I would strongly recommend that you look for answers there before asking the community, especially when it comes to basic and common APIs like XMLHttpRequest.