How to set up timer in JavaScript by passing a parameter

Question

I'm trying to set up the timeout using the HTML input box, and use this as a parameter to setTimeout.

It's a very simple task, but I'm not an JS developer, so I'm not sure on how to pass the parameter properly to the arrow function.

HTML code consists only of 2 elements.

<button id="myElementId">Click me</button>
<input id="milliseconds" type="number" placeholder="number of milliseconds"/>

And my JS code looks like:

const clickbutton = document.getElementById('myElementId');
const millis = parseInt(document.getElementById('milliseconds').value, 10);

clickbutton.addEventListener('click', (event) => {
    setTimeout(() => { alert("I work");
  }, millis); // <-- here I don't want to use a static value 
});

However it seems like I can't get the value of millis from outer scope inside the arrow function.

I also tried with passing the second argument:

const clickbutton = document.getElementById('myElementId');
const millis = parseInt(document.getElementById('milliseconds').value, 10);

clickbutton.addEventListener('click', (event, millis) => {
    setTimeout(() => { alert("I work");
  }, millis); 
});

with no luck there.

Any help is appreciated.

Thank you.

put the const millis = ... line inside the timout function, else it wont pick up the value, instead millis will just be null on load — Lawrence Cherone
– Lawrence Cherone, Commented Nov 4, 2018 at 16:31
Your assignment to millis will not extend into the future. With your code, millis will remain at whatever value it gets set to at the time the line of code runs, even if you hadn't mistakenly used const for a value that's supposed to change. One way to fix this is to turn it into a function: jsfiddle.net/khrismuc/m1xqL8ys — user5734311
– user5734311, Commented Nov 4, 2018 at 16:40

slider · Accepted Answer · 2018-11-04 16:31:41Z

5

Get the value in the click event listener because otherwise it's not defined (it's only defined after you type something in the input and decide to click the button):

const clickbutton = document.getElementById('myElementId');

clickbutton.addEventListener('click', (event) => {
  const millis = parseInt(document.getElementById('milliseconds').value, 10);
  setTimeout(() => {
    alert("I work");
  }, millis);
});

<button id="myElementId">Click me</button>
<input id="milliseconds" type="number" placeholder="number of milliseconds" />

answered Nov 4, 2018 at 16:31

slider

13.1k1 gold badge29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Elharony · Accepted Answer · 2018-11-04 16:46:57Z

I would like to explain the previous answer so that you understand where the problem is, and how to fix similar ones in the future, not only having it solved!

The Problem

JavaScript executes your code like this:

The clickbutton variable stores your button element
After that, the millis saves the CURRENT value of your input that equals NaN
So, within your setTimeout function, you are passing the second argument as NaN that's why nothing happens, and the code runs instantly!

How to fix it?

You need to put your millis variable inside the addEventListener function scope, so that whenever the user clicks on the button, JS go and get the value of your input (At the time of clicking the button, not the time of launching the page!). Moreover, it changes the variable's value every time the button is clicked!

Conclusion

Your problem isn't about dealing with Scope in JavaScript, it's all about the incorrect logic. You are getting the input's value ONCE, not every time the user clicks on the button.

Amr Ibrahim · Accepted Answer · 2018-11-04 16:38:58Z

0

Get value after click like this

    const clickbutton = document.getElementById('myElementId');

    clickbutton.addEventListener('click', (event) => {
        // get value here after you click
        // this part run later wher you click
        const millis = parseInt(document.getElementById('milliseconds').value, 10);
        
        setTimeout(() => { alert("I work");
        }, millis);
    });

answered Nov 4, 2018 at 16:38

Amr Ibrahim

2,2544 gold badges26 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to set up timer in JavaScript by passing a parameter

3 Answers 3

Comments

The Problem

How to fix it?

Conclusion

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

The Problem

How to fix it?

Conclusion

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related