Uncaught TypeError: second_input is null when executing a timer function

Question

var idinterval;
var second_input = document.getElementById("Seconds");
var minute_input = document.getElementById("Minutes");
var second_value = second_input.value;
var minute_value = minute_input.value;

var total = parseInt(minute_value * 60) + parseInt(second_value);


function starter() {
  if (total > 0) {
    total = total - 1;
    document.getElementById("timing").innerHTML = Math.floor(total / 60) + ":" + total % 60;
    return;
  }
}

function start_the_timer() {
  setInterval(() => {
    starter();
  }, 1000);
}

::placeholder {
  font-size: 20px;
}

.Starter {
  color: white;
  width: 120px;
  height: 37px;
  padding: 6px;
  font-size: 15px;
  background-color: rgb(21, 27, 84);
  margin-top: 30px;
  margin-right: 5px;
}

.Starter:hover {
  background-color: #0000B9;
}

.Pauser {
  color: white;
  width: 120px;
  height: 37px;
  padding: 6px;
  font-size: 15px;
  background-color: #767676;
  margin-top: 30px;
  margin-right: 5px;
}

.Pauser:hover {
  background-color: #444444;
}

.Stopper {
  color: white;
  width: 120px;
  height: 37px;
  padding: 6px;
  font-size: 15px;
  background-color: #B2B2B2;
  margin-top: 30px;
  margin-right: 5px
}

.Stopper:hover {
  background-color: #303030;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="timer.css" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clockworks</title>
</head>

<body>
  <script src="timer.js" type="text/javascript"></script>
  <div style="margin-top:50px;margin-left:50px;">
    <h1 style="font-size: 60px; color: black;font-weight: bold;">Clockworks</h1>
    <hr style="transform: rotate(90deg);margin-left:350px;width:200px ">
    <form id="timer_form">
      <label style="font-size: 30px; font-weight:100; font-style: italic; margin-bottom: 500px;width:5px">
Minutes   <input id="Minutes" value="0" placeholder="00"   style="font-size:20px;background-color:transparent;margin-left: 10px; color:black;height:30px; width: 200px;border-top: none;border-left: none;border-right: none;border-bottom: 1px solid black;" type="number" min="1 " max="2000000">
  </label>
      <br><br>
      <label style="font-size: 30px; font-weight:100; font-style: italic; margin-top: 100px ;">
    Seconds 
    <input id="Seconds" placeholder="00" value="0" style="font-size:20px;background-color:transparent;margin-left: 10px; color:black;height:30px; width: 200px;border-top: none;border-left: none;border-right: none;border-bottom: 1px solid black;" type="number" min="1 " max="2000000">
</label></form>
    <br>
    <button class="Starter" id="start" type="button" onclick="start_the_timer()">Start</button>

    <button class="Pauser" id="pause" type="button" onclick="stop()">Pause</button>


    <button class="Stopper" id="stop" type="button" onclick="reset()">Stop</button>
    <p id="timing" style="font-weight: 600;font-size:100px; position:relative; bottom:300px; left:500px;">00:00</p>
  </div>
</body>

</html>

Note: this is a simple function for a timer that gets the minutes and seconds from a user in an html input text ,this is the error shown in dev tools after executing the code

can anyone tell me the cause of my problem?

Uncaught TypeError: second_input is null

Note: the problem is caused only in JavaScript code. I tried to change the value of minute_input and second_input to any int and it worked

Does this answer your question? why is simple javascript code not running? — Heretic Monkey
– Heretic Monkey, Commented Aug 11, 2020 at 19:41

Antonin Riche · Accepted Answer · 2020-08-11 19:30:41Z

0

Your javascript file is executed directly when the script tag is read, that mean before defining your Seconds input

3 way to solve that

Place your javascript tag at the end of your html file
Define your variables (those calling getElementById) in your starter function
create function containing all your code and call it when body is loaded <body onload="myFunction()">

answered Aug 11, 2020 at 19:30

Antonin Riche

5986 silver badges11 bronze badges

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

Comments

Duy Nguyen · Accepted Answer · 2020-08-11 19:35:18Z

0

This is because the javacript code is excecuted before the input html rendered. Solved this by move those var to the function needed.

answered Aug 11, 2020 at 19:35

Duy Nguyen

2931 silver badge5 bronze badges

1 Comment

Steven-falser Over a year ago

thanks for letting me know , i spent an hour thinking of the cause of this problem

Jack · Accepted Answer · 2020-08-11 19:36:22Z

You are importing your javascript before you define your elements. When the javascript runs, the element with id Seconds does not exist (yet).

You can either move your script import to the bottom of the HTML page or do not look for the element until the start button is pressed. Move all the code before the starter() function into start_the_timer() function like below. Just make sure the start_the_timer and starter functions are referencing the same global total variable

  var total = 0;

function starter() {
  if (total > 0) {
    total = total - 1;
    document.getElementById("timing").innerHTML = Math.floor(total / 60) + ":" + total % 60;
    return;
  }
}

function start_the_timer() {
  var idinterval;
  var second_input = document.getElementById("Seconds");
  var minute_input = document.getElementById("Minutes");
  var second_value = second_input.value;
  var minute_value = minute_input.value;

  total = parseInt(minute_value * 60) + parseInt(second_value);
  setInterval(() => {
    starter();
  }, 1000);
}

::placeholder {
  font-size: 20px;
}

.Starter {
  color: white;
  width: 120px;
  height: 37px;
  padding: 6px;
  font-size: 15px;
  background-color: rgb(21, 27, 84);
  margin-top: 30px;
  margin-right: 5px;
}

.Starter:hover {
  background-color: #0000B9;
}

.Pauser {
  color: white;
  width: 120px;
  height: 37px;
  padding: 6px;
  font-size: 15px;
  background-color: #767676;
  margin-top: 30px;
  margin-right: 5px;
}

.Pauser:hover {
  background-color: #444444;
}

.Stopper {
  color: white;
  width: 120px;
  height: 37px;
  padding: 6px;
  font-size: 15px;
  background-color: #B2B2B2;
  margin-top: 30px;
  margin-right: 5px
}

.Stopper:hover {
  background-color: #303030;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="timer.css" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clockworks</title>
</head>

<body>
  <script src="timer.js" type="text/javascript"></script>
  <div style="margin-top:50px;margin-left:50px;">
    <h1 style="font-size: 60px; color: black;font-weight: bold;">Clockworks</h1>
    <hr style="transform: rotate(90deg);margin-left:350px;width:200px ">
    <form id="timer_form">
      <label style="font-size: 30px; font-weight:100; font-style: italic; margin-bottom: 500px;width:5px">
    Minutes   <input id="Minutes" value="0" placeholder="00"   style="font-size:20px;background-color:transparent;margin-left: 10px; color:black;height:30px; width: 200px;border-top: none;border-left: none;border-right: none;border-bottom: 1px solid black;" type="number" min="1 " max="2000000">
      </label>
      <br><br>
      <label style="font-size: 30px; font-weight:100; font-style: italic; margin-top: 100px ;">
        Seconds 
        <input id="Seconds" placeholder="00" value="0" style="font-size:20px;background-color:transparent;margin-left: 10px; color:black;height:30px; width: 200px;border-top: none;border-left: none;border-right: none;border-bottom: 1px solid black;" type="number" min="1 " max="2000000">
    </label></form>
    <br>
    <button class="Starter" id="start" type="button" onclick="start_the_timer()">Start</button>

    <button class="Pauser" id="pause" type="button" onclick="stop()">Pause</button>


    <button class="Stopper" id="stop" type="button" onclick="reset()">Stop</button>
    <p id="timing" style="font-weight: 600;font-size:100px; position:relative; bottom:300px; left:500px;">00:00</p>
  </div>
</body>

</html>

Collectives™ on Stack Overflow

Uncaught TypeError: second_input is null when executing a timer function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related