i have this code, witch is basically a click counter in javascript. my question is, is it possible to show the "clicks" in two different pages?
My goal is to make two identical pages, but the second one is just to show the click counting, as the first one is to click and at the same time to show the counting.
i dont have much experience in programing. all help is much apreciated :)
html page code:
<!DOCTYPE html>
<html>
<head>
<title>FCT</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/scripts.js"></script>
<script src="chama.js"></script>
</head>
<body>
<button type="button" onclick="hello()">Anterior</button>
<button type="button" onclick="bye()">Próximo</button>
<div class="barraTop"> </div>
<div class="container page">
<div class="row barraSuperior">
<div class="col-xs-1">
<img src="imagens/espamol.png" height="150" width="250">
</div>
<div class="col-xs-11" style="text-align: right;">
<p></p>
<span class="uespiTexto">Escola Secundária Padre António Martins de Oliveira</span><br>
<span class="subtitulo">Matrícula Institucional <strong>SiSU 2019</strong></span>
<!-- <img src="imagens/sisu.png" class="sisuLogo"> -->
</div>
</div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="barraTop"> </div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 ultimaSenha">
<br>
<span id="ultimaSenhaTexto">ÚLTIMA CHAMADA</span><br>
<span>Senha </span>
<span id="ultimaSenhaNumero">0000</span>
</div>
</div>
</div>
<audio id="audioChamada" src="audio/chamada.wav"></audio>
</body>
</html>
and javascript code:
var clicks = 0;
function hello() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function bye() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
};
Only if one page opens the other one*.
If you use
var w=window.open()you can access the other page's document inw.document. And, from the second page, you can access the first one's inwindow.parent.document.*That is with js only. If you can use a server language you could make something more complex using ajax or even sockets.