代码输出[object HTMLInputElement]且乘法运算失效，如何解决？

你遇到的核心问题是直接使用tbInteger变量时，拿到的是输入框的DOM对象，而非用户输入的数值，所以字符串拼接时会显示[object HTMLInputElement]，对象和数字相乘自然得到NaN。

修改后的代码 #

JavaScript部分

function calculate() {
  // 获取输入框并提取数值
  const inputBox = document.getElementById('tbInteger');
  const targetNum = parseInt(inputBox.value, 10);
  const outputArea = document.getElementById('output');
  
  // 清空原有输出，避免重复叠加
  outputArea.innerHTML = '';

  // 验证输入有效性
  if (isNaN(targetNum) || targetNum < 1 || targetNum > 100) {
    outputArea.innerHTML = '请输入1-100之间的正整数';
    return;
  }

  // 生成乘法表
  for (let i = 1; i <= 12; i++) {
    outputArea.innerHTML += `${targetNum} x ${i} = ${targetNum * i}<br>`;
  }
}

HTML补充（完善Clear按钮功能）

把原Clear按钮的代码改成：

<input type="button" value="Clear" class="button" onclick="document.getElementById('output').innerHTML = ''; document.getElementById('tbInteger').value = '';" />

关键修改点 #

• 必须通过document.getElementById('tbInteger').value获取用户输入的字符串，再用parseInt转为整数（第二个参数10确保是十进制解析）
• 每次计算前清空输出区域，否则多次点击会重复追加内容
• 增加输入验证，避免无效输入导致错误
• 用模板字符串（``）简化字符串拼接，提升代码可读性

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