Simple setInterval Javascript HTML interaction test

Using the method from the previous post:

https://camelcasenoodles.blogspot.com/2019/04/a-simple-way-to-test-some-javascript.html

I have made these two files to try out the 'setInterval' in JavaScript.

picture of simple counter in a grey HTML page:






I left the 'alerts' in the functions.  If I'm not sure if a function is being called, I can un-comment the alert, and see if I had an error that is preventing the function from being called.
(I had GetElementById  instead of getElementById   &&  HTML will ignore anything it can't read  *I'll look this up one day soon to confirm* )

 No alert, the function is not being called.

Break it, modify it, experiment. 
May the spam be ever in your flavor.


***********  HTML  **********************

<!DOCTYPE html>

<html>
<head>
<title>Exercise 1</title>
<!-- your src will be different from mine.  see previous blog post linked at top -->
 <script type="text/javascript" src="/path/to/your/folder/name_of_js_file.js">
</script>
  </head>
  <!-- #91cac5 == greyish teal-->
 <!--  another trick to make sure your page is being refreshed is to change the background color of the body and reload/refresh  try red or blue instead of grey-->
  <body id="Main_Body" style="background:grey;">
    <br>
    <br>
  <button id="mybutton" onclick="myFunction()">Test the code</button>
  <h1> This is the browser opened page </h1>
  <br>
  <p id="first_paragraph"> CHANGE</p>
  <button id="stopbutton" onclick="stopFunction()">Stop counter</button>

  </body>
  </html>





******************************************************************************

                            Javascript file
*******************************************************************************
//JavaScript for <your_html_file>.html

var n = 0;

function counter(n){
  return n + 1;
}


function log_info(){
  //alert(" function --log_info  has been called.");
  n = counter(n);
  //document.getElementById("first_paragraph").innerHTML = "start";
  document.getElementById("first_paragraph").innerHTML = n;
}

function myFunction() {
  //alert("myFunction called from button click");<-- to make sure the function is called
  x = setInterval(log_info, 1000);
}

function stopFunction(){
  clearInterval(x);
};

Comments

Popular posts from this blog

JavaScript Ascii animation with while loops and console.log

playing with trigonometry sin in pygame

JavaScript and a Matrix