CODEWITHSUNDEEP
javascripthtml
I_love_pugs
I_love_pugs

Reputation: 103

Looking for an advice. Mistake somewhere. HTML and JS

I wrote a script which counts some time and then shows an image.

I added a button to give the option to stop counting whenever I want. I tried to make a function which is going to make the variable seconds equal to 0, which in this case should start the "else" loop in the timer() function, which is where it should end counting.

Instead of attribute a button to make a surrender() function, can I do it with a background (Line 7).

How should I loop whole operation after a few seconds of waiting (Line 30)?

I'm new to programming, so I would ask for possibly easiest to understand code.

<!DOCTYPE html>
<html>
<body id="bckgrd" bgcolor="white"; onload="timer();">
    <script type="text/javascript">
        var clock;

        // ?? document.getElementById("tlo").onclick=  surrender(); ??

        function timer () {
            clearInterval(clock);
            var start = new Date().getTime();
            clock = setInterval(function() {
                var seconds = Math.round(15 - (new Date().getTime() - start) / 1000);
                if (seconds >= 0)
                    document.getElementById('seconds').innerHTML = seconds;
                else 
                    clearInterval(clock);

                    if (seconds==0) document.getElementById("photo").innerHTML='<img src="sweetpug.jpg"/>';

                    // ?? setTimeout(timer(), 2000) ??

            }, 1000);
        }

        function surrender(){
        seconds==0
        }

    </script>
    <button id= "button" onclick="surrender();">give up</button>
    <p id="seconds">15</p>
    <div id="photo">

    </div>
</body>

Upvotes: 0

Views: 45

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65806

There were several things wrong with your code (see comments in the snippet below), but the biggest obstacle to your surrender function is that even though you set seconds to zero, when the timing function runs again, that value is wiped out when seconds is reset back to your date minus your start. Instead of worrying about seconds, just make surrender do what it needs to: stop the clock, show the image and set the counter to zero:

// Get DOM element references and store them in variables instead
// of scanning for them in your code later.
var btn = document.getElementById("btnSurrender");
var pic = document.getElementById("photo");
var secondsP = document.getElementById('seconds');

// If you don't know what the value of a variable is going to be
// it's best to initialize it to null as a starting value so that
// you can understand what is happening during debugging.

// Variable to store reference to running timer
var clock = null;

// Wire button up to click event handler. Do this using the 
// W3C DOM Event Model standard technique and not as an inline
// HTML event handling attribute.
btn.addEventListener("click", surrender);

function timer () {
  // Stop any previously running timers
  clearInterval(clock);
  
  var start = new Date().getTime();
  
  clock = setInterval(function() {
             // Variable to store the seconds that tick away
             // Because this is declared within the timing function
             // you can't access it from surrender, which is what you 
             // were originally trying to do. If that were the case, you should
             // have declared it outside of both functions so that either could
             // get to it. But, since my answer isn't going to need secons anywhere
             // else but here, we'll leave it here.
             var seconds = Math.round(15 - (new Date().getTime() - start) / 1000);
    
             // Always include the curly braces around your if statement's branches
             // This avoids bugs later on
             if (seconds >= 0) {
               secondsP.textContent = seconds;
             } else {
               clearInterval(clock);
             }

             if (seconds === 0) {
               pic.innerHTML='<img src="sweetpug.jpg" alt="sweetpug.jpg">';
             }
  }, 1000);
}

function surrender(){
 //seconds = 0; // You had seconds == 0, == is for comparison, not assignment
  
 // Stop any previously running timers
 clearInterval(clock);
 pic.innerHTML='<img src="sweetpug.jpg" alt="sweetpug.jpg">';
 secondsP.textContent = 0;
}

timer();
<button id= "btnSurrender">give up</button>
    <p id="seconds">15</p>
    <div id="photo"></div>

Upvotes: 2

Related Questions