increment event after a certain time

Question

I am making an application that simulates a point marker, and I would need it to increase the next mark only after 5 minutes, I did some tests with setTimeout, but I didn’t get what I needed. The application makes the appointments, but does not have the time 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>

Answer 1

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

With class you can count the amount of elements in real time, dispensing the self-improvement with qtd++.

By clicking the button, the attribute onclick changes to a alert, and after 5 minutes, back to normal.

You can put everything within 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>