Why is my latest code overriding the rest of my code

Admin 1
Viewed 54

I have a page with timers. the code for my latest timer only functions properly. but the rest of the timers don't such as the 10 minute timer. It only shows you the set time for the timer. Is my latest code overriding my other code? Are variables being mixed between the two timers? I'm planning on adding several timers to the page, but I got stuck when this happened.

Link to code: http://jsfiddle.net/vtoLx02j/2/

<body>
    
    <div id="1Div">
    
    <h4>Question goes here?</h4>
    
      <input type="text"id="name1"/>
    
      <button onclick="myFunction1()" id="button0" class="button3">Enter</button>
    
    
    </div>
    
    
    <div id="2Div" style="display:none;">
            <h4 id=typeE>How much time do you think you need in minutes?</h4>
            <button onclick="myFunction2()" id="button1" class="button3">10 minutes</button>
            <button onclick="myFunction3()" id="button2" class="button3">20 minutes</button>
            
    </div>
    
    <script>
      function myFunction1(){
        document.getElementById("1Div").style.display="none";
        document.getElementById("2Div").style.display="block";
    }
    </script>
    
    <script>
      function myFunction2(){
        document.getElementById("2Div").style.display="none";
        document.getElementById("timer10").style.display="block";
      }
    </script>
    
    <script>
      function myFunction3(){
        document.getElementById("2Div").style.display="none";
        document.getElementById("timer20").style.display="block";
      }
    </script>
    
    
    <div id="timer10" style="display:none">
    
    <script>
        function startTimer10(duration10, display10) {
        var timer10 = duration10, minutes10, seconds10;
        setInterval(function () {
            minutes10 = parseInt(timer10 / 60, 10);
            seconds10 = parseInt(timer10 % 60, 10);
    
            minutes10 = minutes10 < 10 ? "0" + minutes10 : minutes10;
            seconds10 = seconds10 < 10 ? "0" + seconds10 : seconds10;
    
            display10.textContent = minutes10 + ":" + seconds10;
    
            if (--timer10 < 0) {
                timer10 = duration10;
            }
        }, 1000);
    }
    
    window.onload = function () {
        var tenMinutes = 60 * 10,
            display10 = document.querySelector('#time10');
        startTimer10(tenMinutes, display10);
    };
    </script>
     
     <body>
        
        <center><div><span id="time10">10:00</span></div></center>
        
    </body>
    
    </div>
    
    
    <div id="timer20" style="display:none">
        <script>
        function startTimer20(duration20, display20) {
        var timer20 = duration20, minutes20, seconds20;
        setInterval(function () {
            minutes20 = parseInt(timer20 / 60, 10);
            seconds20 = parseInt(timer20 % 60, 10);
    
            minutes20 = minutes20 < 10 ? "0" + minutes20 : minutes20;
            seconds20 = seconds20 < 10 ? "0" + seconds20 : seconds20;
    
            display20.textContent = minutes20 + ":" + seconds20;
    
            if (--timer20 < 0) {
                timer20 = duration20;
            }
        }, 1000);
    }
    
    window.onload = function () {
        var twentyMinutes = 60 * 20,
            display20 = document.querySelector('#time20');
        startTimer20(twentyMinutes, display20);
    };
    </script>
     
     <body>
        
        <center><div><span id="time20">20:00</span></div></center>
        
    </body>
    </div>
    
    </body>
timer html javascript
1 Answers

You can simply combine all your functions into single startTimer() function.

I am not sure why you are repeating your code again and again to achieve the same results. Its good to have less code but have the same results.

So here's is what i have done and simplified your code.

  1. I have combined both timers into one function
  2. You do not need to use display none and block again on show time duration
  3. When you click on the timer just pass the minutes to the timer function and the span will start displaying the time remaining
  4. You do no need two span to display timer separately you can do all that in one span
  5. You were using script tag so many times which are unnecessary
  6. Both timers are working perfectly with less code and same results.

You can have multiple timers now you just need to pass the minutes to your startTimer() function and timer will start from the given time.

Live Demo

//Start timer
function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

//1
function myFunction1() {
  document.getElementById("1Div").style.display = "none";
  document.getElementById("2Div").style.display = "block";
}

//10 Minutes
function myFunction2() {
  document.getElementById("2Div").style.display = "none";
  var tenMinutes = 60 * 10,
  display10 = document.querySelector('#timerDuration');
  startTimer(tenMinutes, display10);
}

//20 minutes
function myFunction3() {
  document.getElementById("2Div").style.display = "none";
  var twentyMinutes = 60 * 20,
  display20 = document.querySelector('#timerDuration');
  startTimer(twentyMinutes, display20);
}
<body>
  <div id="1Div">
    <h4>Question goes here?</h4>

    <input type="text" id="name1" />

    <button onclick="myFunction1()" id="button0" class="button3">Enter</button>
  </div>
  <div id="2Div" style="display:none;">
    <h4 id=typeE>How much time do you think you need in minutes?</h4>
    <button onclick="myFunction2()" id="button1" class="button3">10 minutes</button>
    <button onclick="myFunction3()" id="button2" class="button3">20 minutes</button>
  </div>
  <center>
    <div><span id="timerDuration"></span></div>
  </center>
</body>

user_136690480
Related