All geek questions in one place

ClearInterval () does not work with clock timer with JavaScript

I am very new to JavaScript and programming in general. I'm currently a little pickle with some code I'm playing with, and I wonder if anyone can give me some tips.

Background:

The code I'm working with is pretty simple; There is a clock with the current time running on setInterval, for the second update.

Below the clock there is a button that reads “Stop”, and when pressed, it will clear the interval, and then the “Start” button. If the button that reads "Start" is pressed again, it will continue the synchronization timer at the current time. Thus, basically this one button toggles the interval of hours, and depending on what state it will be in, the button will read “Start” or “Stop”.

W3Schools: JS Timing , where I initially refer when creating the code I'm working with. Here I will learn how setInterval and clearInterval work. I also took some of the code in the examples and adjusted it to try to turn the timer off and on.

Code:

var clock09 = window.setInterval(myTimer09, 1000); function myTimer09() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("req09").innerHTML = "<h1>" + t + "</h1>"; } function toggle10() { var button = document.getElementById("button10").innerHTML; if (button == "Stop") { window.clearInterval(clock09); document.getElementById("button10").innerHTML = "Start"; } else { clock09 = window.setInterval(myTimer09, 1000); document.getElementById("button10").innerHTML = "Stop"; } } 
 <span class="center" id="req09"></span> <button type="button" id="button10" onclick="toggle10()" class="button">Stop</button>

https://jsfiddle.net/dtc84d78/

Problem:

So my problem with the code is that the button switches from the Stop button to the Start button, but clearInterval does not apply to the variable using setInterval.

I have similar problems in SO, such as this one , and I followed their advice, and still nothing. After hours of trying to figure out, I decided to just copy and paste some example from W3Schools directly into jsFiddle, and it didn't even work (included in the jsfiddle link)?

Am I really crazy about why anything with clearInterval() doesn't work with me? Maybe this is my computer, browser, or something else? I come to SO as my last resource, so if anyone can give me some guidance on this issue, I will name my first child after you.

Thanks in advance.

Additional Information: I am currently working on the Mac desktop using Komodo to write code, and I use Google Chrome to preview the code.

UPDATE:

I mentioned this in the comments, but the code included was in an external .js file. The .js file was then linked between the header tags and immediately before the body body tag.

 <head> <meta charset="utf-8" /> <title>Program</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/program-05.css"> <script type="text/javascript" src="scripts/program-05.js"> /* <![CDATA[ */ /* ]]> */ </script> </head> <body onload="checkCookies(); setTimeout(function() { func11() }, 5000);"> . . . code for stuff . . . code for clock timer . . . code for other stuff <script type="text/javascript" src="scripts/program-05.js"> /* <![CDATA[ */ /* ]]> */ </script> </body>

After @Matz mentioned entering the timer timer code in the chapter section, the code worked just fine! This is what the section of the chapter now looks like.

 <head> <meta charset="utf-8" /> <title>Program</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/program-05.css"> <script type="text/javascript" src="scripts/program-05.js"> /* <![CDATA[ */ /* ]]> */ </script> <script> ///* var clock09 = window.setInterval(myTimer09, 1000); function myTimer09() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("req09").innerHTML = "<h1>" + t + "</h1>"; } function toggle10() { var button = document.getElementById("button10").innerHTML; if (button == "Stop") { window.clearInterval(clock09); document.getElementById("button10").innerHTML = "Start"; } else { clock09 = window.setInterval(myTimer09, 1000); document.getElementById("button10").innerHTML = "Stop"; } } //*/ </script> </head>

Although this works fine, now I want to find out why the js clock timer code works when it is directly in the head section, compared to saving it in an external .js file (with an external file linked to the document)? What can I do to make it work in an external file?

+5
source share
4 answers

One way to fix timer start and stop is to move javascript between HEAD tags so that functions are declared at the time the html loads. I did this job:

 <html> <head> <title>Stuff</title> <script > var clock09 = window.setInterval(myTimer09, 1000); .... your code </script> </head> <body> <span class="center" id="req09"></span> <button type="button" id="button10" onclick="toggle10()" class="button">Stop</button> </body> </html>
0
source

Problem:

This is because by default the Load Type is set to onLoad , which wraps your javascript code in window.onload = function() {} , so the scope of your function was limited to onload , and it was not accessible externally:

enter image description here

Decision:

Click on the Javascript parameter in the Javascript section of the script, change it to No wrapping in the body , and it will work, since now you will place your Javascript code in the body tag.

Additional Note:

Your code also works with a StackOverflow snippet:

 /*My Problem*/ var clock09 = window.setInterval(myTimer09, 1000); function myTimer09() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("req09").innerHTML = "<h1>" + t + "</h1>"; } function toggle10() { var button = document.getElementById("button10").innerHTML; if (button == "Stop") { window.clearInterval(clock09); document.getElementById("button10").innerHTML = "Start"; } else { clock09 = window.setInterval(myTimer09, 1000); document.getElementById("button10").innerHTML = "Stop"; } } /*W3S Problem*/ var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } 
 <!-- My Problem --> <span class="center" id="req09"></span> <button type="button" id="button10" onclick="toggle10()" class="button">Stop</button> <hr> <hr> <!-- W3S Problem --> <p id="demo"></p> <button onclick="clearInterval(myVar)">Stop time</button>

Recommendation

Separation of problems

I will recommend that you move your javascript code to an external file and then include them in your HTML using a script tag. So, for example, you moved your code to app.js and then included it in your HTML as:

 <!-- make sure the path here is relative to the current HTML --> <script src="./app.js"></script>
+2
source

You declare a new date variable in the myTimer09 function, so every time it is called, it shows the current time. You must declare the time outside the function, and then pass it to the function. When you stop the timer, you must save the time value so that you can restart it using this value.

0
source

This seems like a problem with JSFiddle.

The onclick handler looks for window.toggle10, which is not actually defined (check for errors in the console). This seems to be something that others have seen with JSFiddle

I have C & Ped your code in JSbin and it works as described!

0
source

Source: https://habr.com/ru/post/1257917/

More articles:


All Articles