Setting a timer using user input, JavaScript

Question

I'm very new to programming.

For a school project, I'm trying to set a setTimeout(); function using input from the user. Here is my code:

let header = document.getElementById('header');
let input = document.getElementById('input');
let btn = document.getElementsByTagName('div')[1];
let response1 = document.getElementById('response1');

function playSound() {
  setTimeout(function () {
    var x = document.getElementById("myAudio")
    x.play()
  }, 3000); //input.value?? or 1000 * input.value??
}

Normally, if i want to access the user's input within the input box I would type input.value. However, the setTimeout function does not recognize input.value as a parameter that can be set to be used as a countdown. I don't know what to do.

Any help would be greatly appreciated.

What exactly are you trying to achieve? Do you want the user to enter the delay? — Wais Kamal
– Wais Kamal, Commented Dec 13, 2020 at 20:57
Can you post the exact error you are getting (console output)? — comonadd
– comonadd, Commented Dec 13, 2020 at 21:06
I was not getting an error message within the console. The function would execute instantly as if no timeout was present. I.E. my playSound function would execute instantly regardless of the number from the input.value. — Angelo Carini
– Angelo Carini, Commented Dec 13, 2020 at 21:12

Wais Kamal · Accepted Answer · 2020-12-13 21:02:11Z

1

The setTimeout function does not recognize input.value as a parameter that can be set to be used as a countdown

It does recognize it. If you are encountering an error, then most likely your input is a text input, in which case you have to convert its value to a number before using it in setTimeout:

let header = document.getElementById('header');
let input = document.getElementById('input');
let btn = document.getElementsByTagName('div')[1];
let response1 = document.getElementById('response1');

function playSound() {
  setTimeout(function () {
    var x = document.getElementById("myAudio")
    x.play()
  }, Number(input.value));
}

If the value entered is in seconds, use input.value * 1000.

answered Dec 13, 2020 at 21:02

Wais Kamal

6,2503 gold badges21 silver badges47 bronze badges

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

5 Comments

comonadd Over a year ago

I'm pretty sure setTimeout automatically converts the second parameter into number.

Angelo Carini Over a year ago

That worked! Thank you very much, I've spent the last 2 hours trying to figure this out.

Wais Kamal Over a year ago

@dmitryguzeev no it doesn't. It just regards any string entered as 1, so setTimeout(foo, "1000") is the same as setTimeout(foo, 1)

comonadd Over a year ago

@WaisKamal I tested it on both latest Firefox and Chrome releases. If you pass "5000" as a second parameter, it waits 5 seconds.

Wais Kamal Over a year ago

Oh sorry you are right. No idea how it worked for the OP though :)

Ortiga · Accepted Answer · 2020-12-13 21:54:46Z

1

To execute setInterval dynamically, you need to call function instead of the input text:

Create a function startInterval
Call function onChangeInterval in event of the input text with the value of the input

<script>
    var intervalId;
    
    function startInterval(_interval) {    
        intervalId = setInterval(function() {
        }, _interval);
    }
    
    function onChangeInterval (interval) {
        interval -= 100;
        clearInterval(intervalId);
        startInterval(interval);
    }
</script>

edited Dec 13, 2020 at 21:54

Ortiga

8,8466 gold badges45 silver badges74 bronze badges

answered Dec 13, 2020 at 21:31

Renato Sant'Anna

4582 silver badges7 bronze badges

Collectives™ on Stack Overflow

Setting a timer using user input, JavaScript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related