zwiększanie czasu co 5 min i wyświetlanie tego w div

pytanie zadane 8 czerwca 2019 w JavaScript przez aniaska4 Obywatel (1,010 p.)

Hej chciałabym za pomocą buttona zwiększać i zmniejszać czas o 5 minut wyświetlany w inpucie. Po wejściu na stronę mam aktualną godzinę. Po kliknięciu w + udało mi się zwięszyć godzinę tylko raz o 5 min. każde kolejne kliknięcie zwiększa znowu o 5 min ale od aktualnej z obiektu new Data(). I rozumiem czemu sie tak dzieje, bo cały czas pobieram czas aktualny. Ale zupełnie nie wiem jak to zapętlić i zwiększać czas co 5 min ++.

function getTime() {
        var data = new Date();

        return data.toLocaleTimeString();
    }
    document.getElementById('time').innerHTML = getTime();

    

    document.getElementById('add').addEventListener("click", function () {
        let newDateObj =getTime() + (5 * 60 * 1000);
        console.log(newDateObj)
        document.getElementById('time').innerHTML = newDateObj;
    })

    document.getElementById('subtract').addEventListener("click", function () {
        let newDateObj =getTime() - (5 * 60 * 1000);
        console.log(newDateObj)
        document.getElementById('time').innerHTML = newDateObj;
    })

<span class="add-time btn-inc" id="add" >+</span>
<input type="text" name="time" id="time" class="field">
<span class="substract-time btn-inc" id="subtract" >-</span>

Dodatkowo czas wyświetla mi siew inpucie w konsoli, ale na stronie już nie :/

Nie mam pomysłów co zmieć. Może ktoś coś podpowie :(

1 odpowiedź

odpowiedź 9 czerwca 2019 przez Mateo13 Bywalec (2,360 p.)
wybrane 9 czerwca 2019 przez aniaska4

Najlepsza

coś takiego?

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<style>
  *{
    font-size:30px;
  }
  #add:hover,#subtract:hover{
    cursor:pointer;
  }
  </style>
<span class="add-time btn-inc" id="add" >+</span>
<input type="text" name="time" id="time" class="field">
<span class="substract-time btn-inc" id="subtract" >-</span>


</body>
</html>

const input = document.getElementById('time');
const add = document.getElementById('add');
const subtract = document.getElementById('subtract');
input.value = new Date().toLocaleTimeString();
let currentTime = new Date().getTime();
let i=0;
add.addEventListener('click',function(){
  console.log(i);
  i = i+1000*60*5;
  console.log(new Date(currentTime+i));
  input.value = new Date(currentTime+i).toLocaleTimeString();
});
subtract.addEventListener('click',function(){
  console.log(i);
  i = i-1000*60*5;
  console.log(new Date(currentTime+i));
  input.value = new Date(currentTime+i).toLocaleTimeString();
});

setInterval(
function(){
  i+=1000;
  input.value = new Date(currentTime+i).toLocaleTimeString();
},1000
)