How to insert a function output into an array for another function

Question

I have the following code as part of an idea to teach my kid how to read time. I'm trying to take the output of the clock program and insert it into a list of incorrect times. The idea being when the correct time, in comparison to an analogue clock, shows to then say so.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .clock {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
    }
  </style>
</head>

<body onLoad="startclock()">
  <div id="changeTime" class="clock"></div>
  <script type="text/javascript">
    var timerID = null
    var timerRunning = false

    function stopclock() {
      if (timerRunning)
        clearTimeout(timerID)
      timerRunning = false
    }

    function startclock() {
      stopclock()
      showtime()
    }

    function showtime() {
      var now = new Date()
      var hours = now.getHours()
      var minutes = now.getMinutes()
      var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
      timeValue += ((minutes < 10) ? ":0" : ":") + minutes
      timeValue += (hours >= 12) ? " P.M." : " A.M."
      document.getElementsByClassName("clock").value = timeValue
      timerID = setTimeout("showtime()", 1000)
      timerRunning = true
    }

    var myTime = ['08:07 A.M.', '10:15 A.M.', '03:43 P.M.', '07:44 P.M.', '11:59 A.M.', '01:19 P.M.', '01:21 A.M.'];
    myTime.push(timerID);
    var counter = 0;
    var elem = document.getElementById("changeTime");
    setInterval(change, 3000);

    function change() {
      var counter = Math.floor(Math.random() * myTime.length);
      elem.innerHTML = myTime[counter];
    }
  </script>
</body>

</html>

I've tried using what I think is the correct variable and using push to insert it into the list however when the correct time is supposed to show it goes blank. My other problem is that when initially activated the first three seconds it is always blank. Any help fixing these two issues would be gratefully appreciated as I'm still very much learning javascript.

Please check www.testing12audio.com for what I have so far.

I'm not sure if I'm following what you're trying to achieve. Can you make a JS Fiddle or simplify your question a little bit more? — mwilson
– mwilson, Commented Jul 18, 2016 at 0:55
Hi. Certainly, not a problem. The first part of the above code down to the line timeRunning = true is a standard clock showing hours and minutes as well as AM or PM. From there down is a program randomly putting out a value from the var myTime. what I'm trying to do is take the output of the clock and insert it into the var myTime as one of the list that can be randomly selected. — Skinner
– Skinner, Commented Jul 18, 2016 at 0:59
document.clock.face.value = timeValue This line throws JS error. Please keep the code simple and run-able....@Skinner — Ayan
– Ayan, Commented Jul 18, 2016 at 0:59
The code works for the clock, as does the random output from the list. I've run both seperately with no problems — Skinner
– Skinner, Commented Jul 18, 2016 at 1:02
You can now see what I have so far at www.testing12audio.com — Skinner
– Skinner, Commented Jul 18, 2016 at 1:08

Ayan · Accepted Answer · 2016-07-18 02:35:52Z

1

There were 2 problems:

Things were getting blank
Non-functional for the first 3 seconds

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .clock {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
    }
  </style>
</head>

<body onLoad="startclock()">
  <div id="changeTime" class="clock"></div>
  <script type="text/javascript">
    var timerID = null
    var timerRunning = false

    function stopclock() {
      if (timerRunning)
        clearTimeout(timerID)
      timerRunning = false
    }

    function startclock() {
      stopclock()
      showtime()
    }
    var myTime = ['08:07 A.M.', '10:15 A.M.', '03:43 P.M.', '07:44 P.M.', '11:59 A.M.', '01:19 P.M.', '01:21 A.M.'],
      timeVal;

    function showtime() {
      var now = new Date()
      var hours = now.getHours()
      var minutes = now.getMinutes()
      var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
      timeValue += ((minutes < 10) ? ":0" : ":") + minutes
      timeValue += (hours >= 12) ? " P.M." : " A.M.";
      timerID = setTimeout(showtime, 1000);
      if (timeValue != timeVal) {
        if (timeVal !== undefined) {
          myTime.pop();
        }
        myTime.push(timeValue);
        timeVal = timeValue;
      }
      timerRunning = true
    }

    var counter = 0;
    var elem = document.getElementById("changeTime");

    (function change() {
      var counter = Math.floor(Math.random() * myTime.length),
        time = myTime[counter];
      elem.innerHTML = myTime[counter];
      if (time === timeVal) {
        // if displayed the correct time, its pushed out of the array.
        myTime.pop();
        timeVal = undefined;
      }
      setTimeout(change, 1500);
    })();
  </script>
</body>


</html>

edited Jul 18, 2016 at 2:35

answered Jul 18, 2016 at 1:30

Ayan

2,3782 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ayan Over a year ago

@skinner This isnt the exact solution. Help me understanding the problem in this solution. We aint getting you in a clarified way. showtime () needs improvement.

Ayan Over a year ago

@skinner Please validate whats missing.

Skinner Over a year ago

Hi, I'm trying to take the output of the clock ( function showtime() I think) and insert it into the var myTime so that it shows up as one of the random times on the screen

Ayan Over a year ago

Hey @Skinner, I think I get you. So initially you have a myTime array containing some time list. I have made some modifications. Now after every 1 min. time there is a new time appended to the array. Have given console logs for additions too. So keep this program running for a couple of hours and it has whole lot of bunch of random time for the kid to learn! Lemme know if I am still missing something here brother.

Skinner Over a year ago

Hi, yeah, basically I want to put the correct time in amongst a bunch of wrong times to flash up individually on the screen so that when the correct time shows he then has to say so. I don't want the list to get too big as I don't want him to have to wait 10 minutes for the correct time to appear though. Appreciate your help

|

Collectives™ on Stack Overflow

How to insert a function output into an array for another function

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related