title: Looking for an advice. Mistake somewhere. HTML and JS
body: <p>I wrote a script which counts some time and then shows an image.</p>
  
  <p>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 <code>seconds</code> equal to 0, which in this case should start the "else" loop in the <code>timer()</code> function, which is where it should end counting.</p>
  
  <p>Instead of attribute a button to make a <code>surrender()</code> function, can I do it with a background (Line 7).</p>
  
  <p>How should I loop whole operation after a few seconds of waiting (Line 30)?</p>
  
  <p>I'm new to programming, so I would ask for possibly easiest to understand code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body id="bckgrd" bgcolor="white"; onload="timer();"&gt;
      &lt;script type="text/javascript"&gt;
          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 &gt;= 0)
                      document.getElementById('seconds').innerHTML = seconds;
                  else 
                      clearInterval(clock);
  
                      if (seconds==0) document.getElementById("photo").innerHTML='&lt;img src="sweetpug.jpg"/&gt;';
  
                      // ?? setTimeout(timer(), 2000) ??
  
              }, 1000);
          }
  
          function surrender(){
          seconds==0
          }
  
      &lt;/script&gt;
      &lt;button id= "button" onclick="surrender();"&gt;give up&lt;/button&gt;
      &lt;p id="seconds"&gt;15&lt;/p&gt;
      &lt;div id="photo"&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>