increment event after a certain time

Question

increment event after a certain time

Navigation

#1 by (2 votes)

1

I am making an application that simulates a point marker, and I would need it to increment the next marker only after 5 minutes, I did some tests with setTimeout , but I did not get what I needed. The application makes the markings but does not have the timer (5 minutes).

js:

    var qtd = document.getElementById("dataTime");

function getTime(){

  var data = new Date();
  var full_time = data.getHours() + ":" + data.getMinutes() + ":" + data.getSeconds();

  var dataCompleta = full_time;

  while (qtd < 4){
   document.getElementById("horaMarcada").insertAdjacentHTML('beforeend', '<span id="dataTime">'+ dataCompleta +' </span>');
   qtd++;
   return false;
  }
}

html:

<button onclick="getTime()">Marcar</button>

javascript javascript-eventos

asked by anonymous 22.01.2018 / 18:22

1 answer

Python3: How to calculate the number of working days between two dates? CSS with custom list-style-type in awesome fonts

score 2 · Accepted Answer

It is necessary to change the <span id="dataTime"> to <span class="dataTime"> because elements with the same id are being created, which is already wrong.

With class you can count the number of elements in real time, dispensing with auto-incrementing with qtd++ .

When you click the button, the onclick attribute changes to alert , and after 5 minutes, it returns to normal.

You can put everything inside the function in the order below:

function getTime(){

   document.querySelector("button").setAttribute("onclick","alert('Aguarde 5 minutos!')");
   
   var data = new Date();
   var full_time = data.getHours() + ":" + data.getMinutes() + ":" + data.getSeconds();
   var dataCompleta = full_time;
   
   document.getElementById("horaMarcada").insertAdjacentHTML('beforeend', '<span class="dataTime">'+ dataCompleta +' </span>');
   var qtd = document.getElementsByClassName("dataTime").length;

   if(qtd < 4){
      setTimeout(function(){
         document.querySelector("button").setAttribute("onclick","getTime()");
      }, 300000);
   }else{
      document.querySelector("button").disabled = true;
      console.log("fim");
   }
}

<button onclick="getTime()">Marcar</button>
<div id="horaMarcada"></div>