Home/ Questions/Q 9041195
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T10:10:52+00:00

I am looking to create an egg timer application that the user passes in

  • 0

I am looking to create an egg timer application that the user passes in value’s via various form select tags. By doing so they set the timer, when I try to do so I get a NaN error. In the following I have the javascript I am currently working with and a bit of the HTML however not all of it. 

<html>
<head>
<script language = "javascript" type = "text/javascript">

var minutes

var miuntes=setInterval(timer, 1000); //1000 will  run it every 1 second

function timer(m)
{
  minutes = m;
  minutes=minutes-1;
  if (minutes <= 0)
  {
     clearInterval(minutes);
     //counter ended, do something here
     return;
  }

 document.getElementById("txt").innerHTML=minutes + "minutes"; // watch for spelling
}


function checktimer()
{

var checkbox1 = form.preference.value;
var checkbox2 = form.eggsize.value;
var checkbox3 = form.suacepansize.value;

if(checkbox1 == 1 && checkbox2 == 1 && checkbox3 == 1)
{
m = 3;
s = 0;
}

timer(m);
}

</script>

</head>
<body>
<div id = "txt"> </div>

    <form id="form" onclick ="checktimer()">

    <div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 1 </h2></div>
    <div class="question-text"><h6>How do you like your egg? </h6> </div>
    <select id="prefernce" name ="preference">
  <option value="1">Soft</option>
  <option value="2">Medium</option>
  <option value="3">Hard</option>
</select>

    </div> <!--Ends the question div-->

<div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 2 </h2></div>
    <div class="question-text"><h6>What size is your egg? </h6> </div>
    <select id="eggsize" name = "eggsize">
  <option value="1">Small</option>
  <option value="2">Medium</option>
  <option value="3">Large</option>
</select>

    </div> <!--Ends the question div-->

    <div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 3 </h2></div>
    <div class="question-text"><h6>What size is the saucepan? </h6> </div>
    <select id="saucepansize" name = "suacepansize">
  <option value="1">Small</option>
  <option value="2">Medium</option>
  <option value="3">Large</option>
</select>

    </div> <!--Ends the question div-->

        <div class = "question">
            <input type="submit" id="button" name="submit" value = "Go" onclick="checktimer()"/> <br/> 
        </div>

    </form>

    </div>  <!--Ends the main form div-->

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have made a few changes.

    1. I moved the onclick event to an onsubmit event, and I return false from the function to stop the form from submitting.
    2. Because the interval runs when the page loads, it instantly clears itself – so I start the interval from the onsubmit handler
    3. I have renamed the interval variable to avoid two variables called “minutes” (although one was incorrectly spelled)
    4. I have dispensed with the m argument as you have the global minutes variable

    Note: At the moment, it counts down at one minute per second – you’ll either need to times the minutes by 60 and count down in seconds, or only fire the interval once per minute.

    The full adjusted script is:

    <html>
<head>
<script type="text/javascript">
var minutes = 0;
var interval;

function timer() {
  minutes = minutes - 1;

  document.getElementById("txt").innerHTML= minutes + " minutes"; // watch for spelling

  if (minutes <= 0) {
     //counter ended, do something here
     window.clearInterval(interval);
     return;
  }
}


function checktimer() {
    var checkbox1 = form.preference.value;
    var checkbox2 = form.eggsize.value;
    var checkbox3 = form.suacepansize.value;

    if(checkbox1 == 1 && checkbox2 == 1 && checkbox3 == 1) {
        minutes = 3;
        s = 0;
    }

    interval = setInterval(timer, 1000);

    return false;
}

</script>

</head>
<body>
<div id = "txt"> </div>

    <form id="form" onsubmit="return checktimer()">

    <div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 1 </h2></div>
    <div class="question-text"><h6>How do you like your egg? </h6> </div>
    <select id="prefernce" name ="preference">
  <option value="1">Soft</option>
  <option value="2">Medium</option>
  <option value="3">Hard</option>
</select>

    </div> <!--Ends the question div-->

<div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 2 </h2></div>
    <div class="question-text"><h6>What size is your egg? </h6> </div>
    <select id="eggsize" name = "eggsize">
  <option value="1">Small</option>
  <option value="2">Medium</option>
  <option value="3">Large</option>
</select>

    </div> <!--Ends the question div-->

    <div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 3 </h2></div>
    <div class="question-text"><h6>What size is the saucepan? </h6> </div>
    <select id="saucepansize" name = "suacepansize">
  <option value="1">Small</option>
  <option value="2">Medium</option>
  <option value="3">Large</option>
</select>

    </div> <!--Ends the question div-->

        <div class = "question">
            <input type="submit" id="button" name="submit" value = "Go"/> <br/> 
        </div>

    </form>

    </div>  <!--Ends the main form div-->

</body>
</html>
    • 0