I am encountering an issue with my website. The index.html page contains JavaScript code that triggers an AJAX request to show the content of other.html inside a div in index.html.
However, despite the other.html loading correctly, the JavaScript code within it does not work as expected. Specifically, I have a simple script that should display an alert message saying "hello."
Here is an excerpt of the code:
index.html:
<html>
<head>
<script src=main.js></script>
</head>
<body>
<div id="to_change">bla bla bla</div>
<div id="button">click me</div>
</body>
<html>main.js:
...
...
function sendRequest() {
request.open("GET", "other.html", true);
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
var response = request.responseText;
if(response) {
document.getElementById("to_change").innerHTML = response;
}
}
}
request.send(null);
}
...button.click(...sendRequest...);
...
...
other.html
<script type=...>alert("hello");</script>
<div>text text text text</div>
If anyone has insight into why the JavaScript code in other.html is not functioning properly when loaded into index.html, your help would be greatly appreciated. Thank you.