I created a Stopwatch in JavaScript. I would like to add a sound when a user inputs the time to be reminded

Question

I am a newbie and trying to learn. I created a Start-stop watch in HTML and js. I would like to add an input field for the users to input time and when it hits that a sound should be played.

I tried to make a variable and try to get the input data but I only screw up everything. I tried to look for it on YouTube and Google but I couldn't seem to find any answers.

Thanks for your time. Below is my code.

 <div class="controls">
            <button onclick="start()">Start</button>
            <button onclick="pause()">Pause</button>
            <button onclick="stop()">Stop</button>
            <button onclick="restart()">Restart</button>
            <button onclick="lap()">Lap</button>
            <button onclick="resetLaps()">Reset Laps</button>
        </div>
        <div class="stopwatch">
            00:00:00
        </div>
        <input type="text" id="inputVal"><button onclick="getVal()">Set Time</button>
        <ul class="laps"></ul>
        <audio id="ado" src="http://static1.grsites.com/archive/sounds/musical/musical009.mp3" controls="true"></audio>

Below is the Javascript.

<script type="text/javascript">
        var ms = 0, s = 0, m = 0;
        var timer;

        var stopwatchEL = document.querySelector('.stopwatch');
        var lapsContainer = document.querySelector('.laps');

        function start(){

            if(!timer){
                timer = setInterval(run, 10)
                
               
            }
            
            
        }

        function run(){
            stopwatchEL.textContent = getTimer();
            ms++;
            

            updateTimer(); 

            if(ms == 100){
                ms = 00;
                s++
                
            }

            if(s == 60){
                s = 0;
                m++;

            }

            

        }

        function pause(){
            stopTimer();
        }

        function stop(){
            stopTimer();
            m = 0;
            ms = 0;
            s = 0;
            stopwatchEL.textContent = getTimer();
            
        }

        function getTimer(){
            return (m < 10 ? "0" + m:m) + ":" + (s < 10 ? "0" + s:s) + ":" + (ms < 10 ? "0" + ms:ms);
        }

        function stopTimer(){
            clearInterval(timer);
            timer = false;
        }

        function restart(){
            stop();
            start();
        }

        function lap(){
            if(timer){
                var li = document.createElement('li');
                li.innerText = getTimer();
                lapsContainer.appendChild(li);


            }
        }

        function resetLaps() {
            lapsContainer.innerHTML = "";

        }
        
        
        function getVal(){
                var inputVal = document.getElementById('inputVal').value;
                
            }

        function updateTimer() {
        
        if(m == 0, ms == 0, s == inputVal){

        $('#ado').get(0).play();
        pause();

      }
    }

        </script>

Thanks again.

Answer 1

First you need inputVal globally as @Denhell mentioned.

var inputVal = Number.POSITIVE_INFINITY;
function getVal(){
    inputVal = document.getElementById('inputVal').value;
}

Second your function updateTimer needs a comparison between your inputVal and the actual time of the timer. For playing the sound I transferred your jQuery-code to vanilla JS.

function updateTimer() {
    if(getTimer() == inputVal){
        document.getElementById('ado').play();
        pause();
    }
}

In the function run the call of the updateTimer has to be executed at the end because otherwise the value for the comparison doesn't function right at the beginning of a new second or minute (e.g. 00:13:00).

function run(){
    stopwatchEL.textContent = getTimer();
    ms++;
        
    if(ms == 100){
        ms = 0;
        s++;
    }

    if(s == 60){
        s = 0;
        m++;
    }

    updateTimer();     
}

The only thing is, that the timer stops right but do not update the last ms. For this you could look yourself. For my solution it is necessary that the manually set time is at the format mm:ss:ms with all three values as a 2-digit value like 01:17:09

You can try it here: https://jsfiddle.net/8w67uy5a/5/