Вам не нужно использовать ajax для изменения элементов DOM.Вы использовали AJAX, чтобы получить файл и использовать его содержимое для изменения содержимого элемента с идентификатором «hidereveal». AJAX просто используется для получения данных или отправки данных на сервер, например, или записи в файл (и многих других).Просто подсказка, вам не нужно создавать 2 тега сценария.Вы можете создать имя файла, например, myScripts.js и добавить тег сценария в конце тела.
<body>
.....
<script src="myScripts.js"></script>
</body>
Я рекомендую вам начать использовать прослушиватели событий JavaScript.
document.querySelector('#addContent').addEventListener('click', function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("hidereveal").innerHTML += this.responseText;
}
};
xhttp.open("GET", "rain.xml", true);
xhttp.send();
});
document.querySelector('#removeContent').addEventListener('click',function removeExtratext() {
document.getElementById("hidereveal").innerHTML = "";
});
#contentChanger
{
margin:auto;
width:90%;
height:auto;
border: 1px black solid;
text-align:center;
}
p
{
text-align:center;
}
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="contentChanger">
<p>this is a test, when you click the button and ajax will add in more data from the server
<button type="button" id = "addContent">Click to load the ajax text</button>
<button type="button" id = "removeContent">Click to remove the extra text</button>
</p>
</div>
<div id="hidereveal">
come to the dark side, we have cookies!
</div>
<script src='myScripts.js'></script>
</body>
Я изменил ваш HTML, потому что вы также удалили кнопки из HTML.У меня нет rain.xml, но удаление работает.Так что попробуйте.Надеюсь, это поможет.