title: Countdown with a delay in JavaScript
body: <p>I've started to learn JavaScript, and I'm coding a program that get a number from the user and counts down to zero with a delay of one second for each number.</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function DescreasNo(){
      var MyInput = parseInt(document.getElementById('HoursOfWork').value);
   var output = document.getElementById('output01');
   output.innerHTML = '';
   for ( var i=MyInput ; i&gt;0 ; i--){
          output.innerHTML += i +"&lt;br&gt;";
      } 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="StyleSheet.css" /&gt;
      &lt;script src="Script.js"&gt;&lt;/script&gt;
  
  
      &lt;title&gt;EyeProctect Project&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;h1&gt;Eye Protect&lt;/h1&gt;
      &lt;h4&gt;Keep Your Eyes safe&lt;/h4&gt;
      &lt;input type="text"  id="HoursOfWork" placeholder="Enter your hours of work ...." /&gt;
      &lt;button class="start" onclick="DescreasNo()" &gt;Let's Go!&lt;/button&gt;
      &lt;p id="output01"&gt;&lt;/p&gt;
  
     
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I used <code>setTimeout</code> and <code>setInterval</code>, but my problem is that it just shows zeros for each number, like this:</p>
  
  <blockquote>
    <p>0, 0, 0, 0 </p>
  </blockquote>
  
  <p>Please help me to solve this problem.</p>