Want to create a program that gives a set time (stopwatch) and generates keys within that time all using the same button

I am working on a project that generates a 6 digit string key all the while being timed. So my stopwatch has 3 buttons. Start, stop, and reset. I want to create a program in which, when i click on start it will generate a key and the stopwatch will run. So i want to know how i can have the button execute two actions at once. Same with stop, and reset will generate a new key. Also how can i put these two codes together into one?

My code for key generator: function Keygenerate() {

var text ="";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"

for(var i=0; i < 5; i++ ){
    text += possible.charAt(Math.floor(Math.random() * possible.length()));     
}
return text;

}

My code for the Stopwatch:

    <div class="class">
        <p>CSC 131 Attendance Tracker</p>
    </div>
    <div class="stopwatch">
        <div class="title">
            <h2>KEY:</h2>
        </div>
        <div class="key">
            <input type="text" name="output">
        </div>
        <div class="time">
            <h2>TIME:</h2>
        </div>
        <div class="display">
            <span class="minutes">00:</span><span class="seconds">00:</span><span class="centiseconds">00</span>
        </div>
        <div class="controls">
            <button class="start">Start</button>
            <button class="stop">Stop</button>
            <button class="reset">Reset</button>
        </div>
    </div>

    <script>
        var ss = document.getElementsByClassName('stopwatch');

        [].forEach.call(ss, function (s) {
        var currentTimer = 0,
            interval = 0,
            lastUpdateTime = new Date().getTime(),
            start = s.querySelector('button.start'),
            stop = s.querySelector('button.stop'),
            reset = s.querySelector('button.reset'),
            mins = s.querySelector('span.minutes'),
            secs = s.querySelector('span.seconds'),
            cents = s.querySelector('span.centiseconds');

            start.addEventListener('click', startTimer);
            stop.addEventListener('click', stopTimer);
            reset.addEventListener('click', resetTimer);

        function pad (n) {
            return ('00' + n).substr(-2);
        }

        function update () {
            var now = new Date().getTime(),
                dt = now - lastUpdateTime;

            currentTimer += dt;

            var time = new Date(currentTimer);

            mins.innerHTML = pad(time.getMinutes()) + ":";
            secs.innerHTML = pad(time.getSeconds()) + ":";
            cents.innerHTML = pad(Math.floor(time.getMilliseconds() / 10));

            lastUpdateTime = now;
                if(now == time.getMinutes()){
                    clearInterval(interval);
            }
        }

        function startTimer () {
            if (!interval) {
                lastUpdateTime = new Date().getTime();
                interval = setInterval(update, 1);
            }
        }

        function stopTimer () {
            clearInterval(interval);
            interval = 0;
        }

        function resetTimer () {
            stopTimer();

            currentTimer = 0;

            mins.innerHTML = secs.innerHTML = cents.innerHTML = pad(0);
        }
    });
    </script>
</body>

1 answer

  • answered 2017-06-17 18:50 InfiniteStack

    Well, at its basic you would do it by attaching two functions to an event:

    <button onclick = "generate_key(); stopwatch_run();">
    

    You can also attach functions to a click event:

    object.addEventListener("click", function(){ ... });
    

    It seems like what you're asking is very basic, so I am not sure if I'm being helpful.