I am looking to create two buttons - one for displaying JSON data (animals-1.json, animals-2.json, animals-3.json, etc. depending on the pageCounter which is working correctly) and a second button for deleting the first displayed JSON from the screen. Each JSON file contains only one number, for example, animals-1.json displays number 1, animals-2.json displays number 2, and so on... So, when the first button "SHOW" is clicked 3 times, it will display the numbers 1, 2, 3 on the screen. Then, when I click the second button "HIDE", I want the first number to disappear and only show numbers 2, 3 (from animals-2.json and animals-3.json). How can I achieve this? Thank you :)
<!DOCTYPE html>
<html>
<body>
<h2>next is</h2>
<button id="btn">SHOW</button>
<button id="btnn" >HIDE</button>
<div id="animal-info"></div>
<div id="nome"></div>
<script src="skripta.js"></script>
</body>
</html>
js:
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
var btnn = document.getElementById("btnn");
btn.addEventListener("click", function(){
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'http://10.0.9.243/animals-' + pageCounter + '.json');
ourRequest.onload = function(){
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
};
ourRequest.send();
pageCounter++;
});
function renderHTML(data) {
var htmlString = "";
for (i = 0; i < data.length; i++){
htmlString += "<p>" + data[i].name + "</p>"
}
animalContainer.insertAdjacentHTML('beforeend', htmlString);
}