JavaScript秒表返回NaN问题求助

核心问题定位 #

出现NaN的直接原因有三个：

• 调用stopwatchInterval时，错误传入了DOM元素startValue而非输入框的数值，对DOM元素执行减法运算会返回NaN
• 输入框的值默认是字符串类型，未转换为数字就直接运算，导致隐式转换失败
• 停止按钮误用clearTimeout清除定时器，但实际使用的是setInterval，必须用对应的clearInterval

修复方案与完整代码 #

修改后的JavaScript代码

var timeOutStopwatch; // 用于统一停止多个函数的全局变量

function stopwatch(screenStopwatch, number) {
  screenStopwatch.innerHTML = --number;

  if (number < 0)
    return;
  timeOutStopwatch = setTimeout(function() {
    stopwatch(screenStopwatch, number);
  }, 1000);
};

function stopwatchInterval(screenStopwatch, number) {
  var timeIntervalRef = setInterval(function() {
    if (--number < 0) {
      clearInterval(timeIntervalRef);
      return;
    }

    screenStopwatch.innerHTML = number;
  }, 1000);

  return timeIntervalRef;
};

window.onload = function() {
  var btnStartStopwatch = document.getElementById("turnOn_stopwatch");
  var btnStopStopwatch = document.getElementById("turnOff_stopwatch");

  var screenStopwatch = document.getElementById("stopwatch_screen");

  var timeIntervalRef;

  btnStartStopwatch.onclick = function() {
    var startValue = document.getElementById("start_Value");
    // 将输入值转为数字类型，同时校验有效性
    var numValue = Number(startValue.value);
    if (isNaN(numValue)) {
      screenStopwatch.innerHTML = "请输入有效数字";
      return;
    }
    screenStopwatch.innerHTML = numValue;
    // 传入数字值而非DOM元素
    timeIntervalRef = stopwatchInterval(screenStopwatch, numValue);
  };
  
  btnStopStopwatch.onclick = function() {
    // 用clearInterval清除setInterval创建的定时器
    clearInterval(timeIntervalRef);
  };
};

关键修改说明

• 传递正确的参数：将stopwatchInterval的第二个参数从DOM元素startValue改为转换后的数字numValue，确保减法运算的操作对象是数字
• 类型转换与校验：使用Number()将输入框的字符串值转为数字，同时通过isNaN()判断输入是否有效，避免非数字输入导致的异常
• 修正定时器清除方法：把clearTimeout替换为clearInterval，匹配setInterval创建的定时器类型

保留的HTML与CSS代码

<div id="container">
  <input type="text" id="start_Value">
  <input type="button" value="On" id="turnOn_stopwatch">
  <input type="button" value="Off" id="turnOff_stopwatch">
</div>

<div id="stopwatch_screen"></div>

* {
  padding: 0;
  margin: 0;
}

body {
  background: linear-gradient( 45deg, #2193b0, #6dd5ed);
  height: 100vh;
}

#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 100px;
  text-align: center;
}

input {
  border-radius: 8px;
}

#start_Value {
  background-color: #252525;
  color: wheat;
  width: 200px;
  height: 20px;
}

#turnOn_stopwatch,
#turnOff_stopwatch {
  background: linear-gradient( 45deg, #cc2b5e, #753a88);
  opacity: 0.7;
  width: 100px;
  color: wheat;
}

#stopwatch_screen {
  position: absolute;
  top: 55%;
  left: 50%;
  font-size: 20px;
  transform: translateX(-50%);
}

内容的提问来源于stack exchange，提问作者Adasco