未捕获的TypeError：执行计时器函数时，second_input为null

编程问答 2022-08-23

问题描述

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>

注意：这是计时器的简单功能，可以通过html输入文本从用户那里获取分钟和秒钟，这是执行代码后在开发工具中显示的错误

谁能告诉我问题的原因？

未捕获的TypeError：second_input为空

注意：该问题仅由JavaScript代码引起。我试图将minutes_input和second_input的值更改为任何int，并且有效

解决方法

当您读取script标记时，即在定义您的Seconds输入之前，您的javascript文件将直接执行

三种解决方法

  1. 将javascript标记放在html文件的末尾
  2. 在启动函数中定义变量（调用getElementById的变量）
  3. 创建包含所有代码的函数，并在加载正文时<body onload="myFunction()">调用
,

这是因为在呈现输入html之前已执行了Javacript代码。通过将这些var移至所需的函数来解决此问题。

,

您要在定义元素之前导入JavaScript。当JavaScript运行时，标识为Seconds的元素尚不存在。

您可以将脚本导入移动到HTML页面的底部，或者在按下开始按钮之前不查找元素。将starter()函数之前的所有代码移到start_the_timer()函数中，如下所示。只需确保start_the_timer和starter函数引用相同的全局总变量即可即可。

  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>

htmljavascripttimertimer