How to show the value of a variable that is in another html page

Question

The problem is this: I need to see some values that are updated every 3 seconds in a file that can be a .html, .csv, .txt or .css, any extension that can be seen in the notepad.

Would look like this

./diretório/Pagina1.html ou .csv ou .txt

var x=10

var y=20

var z=30

./diretório/Pagina2.html

Temperatura X [show var x]

Temperatura Y [show var y]

Temperatura Z [show var z]

NOTE: When updating the value in the variable on page 1 would have to update the value in the tag on page 2.

Thank you.

Answer 1

Since you just want to capture the value of the variable in any extension that opens in the notepad, I advise you to do this with javascript.

In archive1 .js must have:

var x = 10;
var y = 20;
var z = 30;

And your page .html, must have access to that file .js. You get it like this:

 <script src="arquivo1.js" ></script>

I left the assumption that it is in the same directory as your html.

Then just make your tags show the variables:

HTML

<p id="x"></p>
<p id="y"></p>
<p id="z"></p>

Javascript

document.getElementById("x").innerHTML = x;
document.getElementById("y").innerHTML = y;
document.getElementById("z").innerHTML = z;

If you want these values to be updated without the need to reload the page, with a range of 3s, as you said in the question, just add this to your javascript inside the html page:

Element.prototype.remove = function() {
  this.parentElement.removeChild(this);
}
setInterval(function() {
  var script = document.createElement("script");
  script.src = "require.js";
  document.getElementsByTagName("body")[0].insertBefore(script, document.getElementsByTagName("body")[0].childNodes[0]);
  document.getElementsByTagName("script")[0].remove();
  document.getElementById("x").innerHTML = x;
  document.getElementById("y").innerHTML = y;
  document.getElementById("z").innerHTML = z;
}, 3000)