First Web page contains a button 'click' (where id ="btn") and when button is clicked I want to show on another Web page content (json files) in div (where id="animal-info"). When button is clicked again new content (next json) will appear in div on that second Web page. I tried with local-storage first, but searching on web I realised that I should use javascript websocket. I am new in sharing data between pages so I could use some help in this please.
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
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 = 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);
} <h1>Press for number</h1>
<button type="button" id="btn" class="blink"> click</button>
<div id="animal-info"></div>
<!--<p>to je broj: <span id="my"></span></p>-->
<script src="skripta.js"></script>
<h2>Numbers:</h2>
<div id="animal-info"></div>
<script src="skripta.js"></script>