CODEWITHSUNDEEP
javascripthtmlclick-counting
Ricardo Duarte
Ricardo Duarte

Reputation: 13

is it possible to refresh the same content in two different html pages?

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">&nbsp;</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 &nbsp;</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">&nbsp;</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 &nbsp;</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;
};

Upvotes: 0

Views: 183

Answers (1)

Gabriel
Gabriel

Reputation: 2190

Only if one page opens the other one*.

If you use var w=window.open() you can access the other page's document in w.document. And, from the second page, you can access the first one's in window.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.

Upvotes: 0

Related Questions