So, I want to make two buttons one for showing json data (animals-1.json,animals-2.json animals-3.json, ... it depends of pageCounter which is working fine) and second button for deleting first showed json on screen. Every json has only one number written for example animals-1.json shows number 1, animals-2.json shows number 2 and so on... so when first button is clicked SHOW 3 times it will show on screen numbers 1 2 3 and when I click second button HIDE I want first number to dissapear and show on screen only numbers 2 3 (animals-2.json and animals-3.json). How to do this? Thanks :) html:
<!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);
}
The best way is adding the class name in htmlString elements.
function renderHTML(data) {
var htmlString = document.createElement("div");
for (i=0; i < data.length; i++){
let pText = document.createTextNode(data[i].name);
let pElement = document.createElement("p");
pElement.append(pText);
htmlString.append(pElement);
htmlString.classList.add('containers') // new Line added
}
animalContainer.append(htmlString);
}
btnn.addEventListener("click", function(){
let containers = document.getElementsByClassName('containers');
if(containers.length > 0){
containers[0].remove();
}
});