如何正确求和localAmount与productAmount并在input标签中输出结果？

核心问题原因 #

你直接相加的localAmount和productAmount是DOM元素对象（比如<span>），而非它们内部的价格数值。当对两个DOM对象执行+操作时，JS会自动将对象转换为字符串，结果就是[object HTMLSpanElement]的拼接，这就是你看到异常结果的原因。

解决步骤 #

要实现正确的数值求和，需要分三步处理：

1. 提取元素的文本内容
   通过textContent或innerHTML获取元素内显示的价格文本（比如productAmount.textContent）。

2. 清理非数字字符并转成数字
   文本里包含逗号、"원"这类非数字符号，需要先过滤掉，再转换为数字类型。可以用正则表达式匹配并移除所有非数字字符，再用Number()或parseInt()转数字。

3. 求和后赋值
   将两个处理后的数值相加，再根据需要格式化（比如加逗号、韩元符号）后赋值给resultSum.value。

修改后的代码示例 #

// 封装一个提取价格数值的工具函数
function extractPriceNum(element) {
  if (!element) return 0; // 元素不存在时返回0，避免报错
  const priceStr = element.textContent.replace(/[^0-9]/g, ''); // 移除所有非数字字符
  return Number(priceStr) || 0; // 转数字，空值时返回0
}

// 替换你原来的赋值语句
const localPrice = extractPriceNum(localAmount);
const productPrice = extractPriceNum(productAmount);
const total = localPrice + productPrice;

// 按需求格式化后赋值，比如保留千分位和韩元符号
resultSum.value = number_format(total) + "원";

额外优化建议 #

• 你的代码里sum变量未声明，建议加上let或const，避免全局变量污染：

  let sum = 70000 + 60000 * (cnt-1);
  

• 可以把复选框点击事件里的求和逻辑也整合到工具函数中，保持代码一致性。

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