JavaScript加减按钮失效求助：随机数与文本拼接功能调试

HTML部分问题 #

• 按钮标签写法错误：使用自闭合<button .../>导致可点击区域异常，需改为标准闭合写法<button>按钮文本</button>
• 重复ID：<span id="numb" id="answer">违反HTML规则，ID必须唯一，拆分两个独立span分别显示当前数字和运算结果

JavaScript核心问题 #

1. 随机数初始化逻辑颠倒：生成随机数后错误将变量赋值为空的span内容，正确操作是把随机数赋值给span的innerHTML
2. 加减函数逻辑混乱：
   • 直接对DOM元素做乘/除法运算，而非先取出内容转换为数字类型
   • 错误使用value属性获取span内容：span没有value，需用innerHTML
   • 未取输入框的文本值：直接用DOM元素拼接会得到[object HTMLInputElement]，必须取value属性
   • 运算逻辑完全错误：减10变成乘10，加10变成除10，不符合需求
   • 变量未定义：计算出结果后，赋值了不存在的out变量
3. Reset函数错误：使用未定义的countN变量，重置逻辑不符合需求，应重新生成1-100的随机数

修复后的完整代码 #

HTML代码

<html>
<head>
  <title>Add Subtract</title>
</head>
<body>
  <h1> Add Subtract</h1>

  <button onClick="subtractTen();" value="sub">Subtract 10</button>
  <button onClick="addTen();" value="add">Add 10</button>
  <button onClick="reset();" value="res">Reset</button>
  <br />
  <input name="text" id="te" />
  <span id="numb"></span>
  <span id="answer"></span>
</body>
</html>

JavaScript代码

// 页面加载时初始化随机数
let currentNum = Math.floor(Math.random() * 100) + 1;
document.getElementById("numb").innerHTML = currentNum;

function subtractTen() {
  const inputText = document.getElementById("te").value;
  currentNum -= 10;
  document.getElementById("numb").innerHTML = currentNum;
  const answerSpan = document.getElementById("answer");
  answerSpan.innerHTML = `${currentNum}${inputText}`;
}

function addTen() {
  const inputText = document.getElementById("te").value;
  currentNum += 10;
  document.getElementById("numb").innerHTML = currentNum;
  const answerSpan = document.getElementById("answer");
  answerSpan.innerHTML = `${currentNum}${inputText}`;
}

function reset() {
  currentNum = Math.floor(Math.random() * 100) + 1;
  document.getElementById("numb").innerHTML = currentNum;
  document.getElementById("answer").innerHTML = "";
}

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