Reset function by button

Question

I have a button that disappears by a function after one second. if I click on the button, I want the function will reset and I will get one another second to click. And-I want the button will disappeared if I did not click this second. (if I click in a second, the button doesn't disappeared, if I miss one second, it is disappeared, but if I click, I'll get another second, and so on...)

This is my code:

HTML:

<button id="btn">click
</button>

JavaScript:

let btn = document.querySelector('#btn');
    btn.addEventListener('click', ()=>{
    click();
    })
    setTimeout(function click() {
        btn.style.display = ('none');
            }, 1000);

That code doesn't work. I am an absolute beginner, so any feedback will help me.

If my question is not understood, please write to me in the comments or edit the question.

AbsoluteBeginner · Accepted Answer · 2020-09-12T23:03:22.737

2

This is my suggestion:

var c = 10;
var timer;

clock();

function clock() {
  timer = setInterval(countdown, 1000);
}

function countdown() {
  counter.innerHTML = --c;
  if (c === 0) {
    btn.style.display = 'none';
    clearInterval(timer);
  }
}

btn.onclick = function() {
  clearInterval(timer);
  c = 10;
  counter.innerHTML = c;
  clock();
};

<button id="btn">Click me before it's too late (<span id="counter">10</span>)</button>

edited Sep 12 '20 at 23:03

answered Sep 12 '20 at 21:00

AbsoluteBeginner

2,160
3
11
21

Thank you. Can the function start to count ( from 10 to 0) again, on another click? I hope you understand my question. – Chani f Sep 12 '20 at 21:31
You mean just once? – AbsoluteBeginner Sep 12 '20 at 21:39
No. If I click, it will count again, but if not, he will disappear. And so on.. If I clicked, it would start counting again, but if not — it would disappear and the game would end. I mean, as long as I click, it does not disappear and starts counting again. I hope you understand me. – Chani f Sep 12 '20 at 21:56
Thanks. Is there a special reason you prefer to use var in variables? – Chani f Sep 12 '20 at 23:41
You can use ```let``` as well. See here: https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var – AbsoluteBeginner Sep 13 '20 at 07:09

score 1 · Answer 2 · answered Sep 10 '20 at 00:30

Change your javascript to the following:

let btn = document.querySelector('#btn');

btn.addEventListener('click', ()=>{
    click();
})

function click() {
    setTimeout(function() {
        btn.style.display = 'none';
    }, 1000);
}

Click was not defined properly :) You should try jQuery, it'll make your learning a lot easier! Also press f12 on Google Chrome to show developer console, errors will show up there.

Sifat Haque · Answer 3 · 2020-09-10T18:10:48.760

You need to apply the display:none inside setTimeout. Here is an example.

let btn = document.querySelector('#btn');
let time = document.querySelector('#time');
const timeLimit = 10;
let timeoutId, intervalId;

time.innerText = timeLimit;

let startTime;

window.onload = () => {
  startTime = Date.now();
  startTimer();
  removeButton();
}


btn.addEventListener('click', stop);


function stop() {
  intervalId && clearInterval(intervalId);
  timeoutId && clearTimeout(timeoutId);
}


function startTimer() {
  let count = 1;
  
  intervalId = setInterval(() => {
    if(count === 10) clearInterval(intervalId);
  
    time.innerText = timeLimit - count;
    count++;
  }, 1000);
}


function removeButton() {
  timeoutId = setTimeout(() => {
    btn.style.display = 'none';
  }, timeLimit*1000);
}

<button id="btn">Click me. I am disappearing ⏳ <span id="time"></span></button>

thanks. I want the button will disappear if I dont click. so what can I do for that? — Chani f, Sep 10 '20 at 00:39
@Chanif i've updated the code. Please check now. And please upvote this if you find this helpful. — Sifat Haque, Sep 10 '20 at 18:11

Reset function by button

3 Answers3