JavaScript中如何将字符串转为数字？已尝试parseInt和Number无效

看来你已经搭好了基础框架，但还没把求和逻辑真正落地，而且parseInt/Number失效大概率是因为文本内容不干净或者没正确处理转换逻辑。我来帮你梳理并修正代码：

问题分析 #

1. 你当前的代码仅实现了点击td变红色的功能，还没有遍历td内容进行求和的核心逻辑
2. 转数字失败通常是因为td文本包含多余空白（空格、换行符）或非数字字符，导致转换无法得到有效数字

修正后的完整代码 #

var td = document.getElementsByTagName("td");
var input = document.getElementById("myInput");

// 为所有td绑定点击事件
for (var i = 0; i < td.length; i++) {
  td[i].addEventListener("click", activeTd);
}

function activeTd(event) {
  // 标记点击的td为红色
  event.target.style.color = "red";
  
  var total = 0;
  // 遍历所有td计算总和
  for (var i = 0; i < td.length; i++) {
    // 取出td文本并去除首尾空白，避免空格干扰转换
    var rawText = td[i].textContent.trim();
    // 转换为数字，Number支持整数和小数，parseInt仅取整
    var num = Number(rawText);
    
    // 只累加有效数字，避免NaN污染结果
    if (!isNaN(num)) {
      total += num;
    }
  }
  
  // 将结果输出到input框
  input.value = total;
  
  // 你未写完的按钮逻辑可以在这里补充，比如：
  // var btn = document.getElementById("submitBtn");
  // btn.addEventListener("click", function() {
  //   console.log("计算的总和是：", total);
  // });
}

关键注意点 #

• 清理文本内容：用trim()去掉文本首尾的空格、换行符，这是转数字失败的最常见原因
• 验证数字有效性：用!isNaN(num)判断转换结果是否为有效数字，避免把空文本、字母等非数字内容加进去，导致总和变成NaN
• 选择合适的转换方法：
  • 如果只需要整数结果，用parseInt(rawText, 10)（记得加第二个参数指定十进制，避免意外的八进制转换）
  • 如果需要保留小数，用Number()或parseFloat()更合适

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