Why is timer yielding same integer regardless of time?

I am writing a simple web app where a random time interval is generated and then the user clicks the button when they guess that much time has passed and then the app shows the margin of error. For some reason it is not calculating the elapses time at all, it's just showing the user as correct every time. I think it's a logic flow or math issue.

I tried using Microsoft AI copilot to debug the logic, it did not properly understand the logic.

Below is my code;


<html>
    <head> 
        <style>
            button {
               background-color:maroon;
               border-radius: 25px;
               border: none;
               padding: 20px;
               color: white;
               text-align: center;
               font-size: 50px;
            }
            body {
                font-size: 50px;
            }
        </style>       
        <script type="text/javascript">
           function guessElapsed() {                
            var limitinmiliseconds = 300; // 5 hours;
            console.log("start");
            var previoustime = localStorage.getItem("previoustime");
            const nowseconds = Math.floor(Date.now() / 1000);
            var nowminutes = nowseconds / 60 ;
            var nowhours = nowminutes / 60 ;   
            var duration = nowhours;
            var aim = localStorage.getItem("aim");                             
                if (previoustime && aim) {
                    var elapsed = duration - previoustime ;
                    var marginoferrorminutes = aim - elapsed;
                    var marginoferrorminutes = Number(marginoferrorminutes).toFixed(0); 
                    var variancediv = document.getElementById("variance");
                    console.log("if");
                    variancediv.innerHTML = "Your margin of error is: " + marginoferrorminutes + " minutes.";                  
                    localStorage.removeItem("previoustime", nowhours);
                    var aim = Math.floor(Math.random() * limitinmiliseconds);
                    const nowseconds = Math.floor(Date.now() / 1000) ;
                    var nowminutes = nowseconds / 60 ;
                    var nowhours = nowminutes / 60 ;                    
                    localStorage.setItem("previoustime", nowhours);
                    localStorage.setItem("aim", aim);
                    var truncaim = Number(aim).toFixed(0); 
                    var buttontext = document.getElementById("button");
                    buttontext.innerHTML=" I think " + truncaim + " minutes have passed.";
                    
                }
                else {                    
                   var aim = Math.floor(Math.random() * limitinmiliseconds);
                   const nowseconds = Math.floor(Date.now() / 1000) ;
                   var nowminutes = nowseconds / 60 ;
                   var nowhours = nowminutes / 60 ;                    
                   localStorage.setItem("previoustime", nowhours);
                   localStorage.setItem("aim", aim);
                   var buttontext = document.getElementById("button");
                   console.log("else");
                   var truncaim = Number(aim).toFixed(0); 
                   buttontext.innerHTML=" I think " + truncaim + " minutes have passed.";
                    }               
            }
        </script>
        </head>
        <body>
        <div id="variance"></div>
        <button id="button" onclick="guessElapsed()">Start</button>
        <script type="text/javascript">
            var aim = localStorage.getItem("aim");
            var previoustime = localStorage.getItem("previoustime");
            if (aim) {
                var buttontext = document.getElementById("button");
                var truncaim = Number(aim).toFixed(0); 
                buttontext.innerHTML=" I think " + truncaim + " minutes have passed.";
            }
        </script>
    </body>
</html>

I tried changing how the integer is formatted leaving the part after the decimal point on or off. I am expecting the margin of error to be different from the aimed guess but it's matching every time despite the time elapsed being different.

Solution

I suggest you step through your code using a debugger. You will notice that when you calculate marginoferrorminutes how different the values of aim and elapsed are.

So your setup of aim is one of the issues.

Here is a rewritten version that generates to be guessed intervals between 1 and 100 seconds:

<!DOCTYPE html>
<html>
<head>
    <style>
        #myButton {
            padding: 10px 20px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <button id="myButton">Click me</button>
    <p id="timeDifference"></p>

    <script>
        const myButton = document.getElementById('myButton');
        const timeDifference = document.getElementById('timeDifference');
        let startTime;
        let randomTime;

        myButton.addEventListener('click', function() {
            let currentTime = new Date();
            if (startTime) {
                let elapsedTime = (currentTime - startTime) / 1000;
                // using abs() to get the absolute value because the order of the subtraction matters (e.g. 5 - 3 = 2 and 3 - 5 = -2)
                // and we always want to display a positive number
                let marginOfError = Math.abs(elapsedTime - randomTime);
                timeDifference.textContent = "Margin of error: " + marginOfError.toFixed(0) + " seconds";
            }
            // generate a random time between 1 and 100 seconds
            randomTime = Math.floor(Math.random() * 100) + 1;
            myButton.textContent = "I guess " + randomTime + " seconds have passed";
            startTime = new Date();
        });
    </script>
</body>
</html>