JS跨函数获取两个输入值相乘返回NaN，如何正确访问对应值？

问题原因 #

• 你声明的nrCoins、coinValue变量存储的是DOM元素节点对象，直接拿两个对象做乘法运算，结果必然是NaN，这是当前报错的核心原因。
• 你计算total的代码是页面初始化阶段就同步执行的，此时用户还没有输入内容、也没有触发对应更新函数，本来就获取不到有效数值。
• coinValuee函数中给coinValue.innerHTML赋值时拼接了$符号，就算后续你取该DOM的内容转数字，也会因为包含非数字字符转换失败。

解决思路 #

单独声明两个全局变量存储纯数字类型的硬币数量和硬币单价，每次更新其中一个值的时候，同步触发总金额的计算逻辑。

修正后代码 #

let coinName = document.getElementById("coinName");
let nrCoins = document.getElementById("nrCoins");
let inputName = document.getElementById("inputName");
let inputNr = document.getElementById("inputNr");
let inputValue = document.getElementById("inputValue");
let coinValue = document.getElementById("coinValue");
let total = document.getElementById("total");

// 新增两个全局变量存储纯数字数值
let coinCount = 0;
let singlePrice = 0;

// 新增总价计算逻辑
function updateTotal() {
  total.innerHTML = (coinCount * singlePrice).toFixed(2) + "$";
}

function coinNamer() {
     coinName.innerHTML = inputName.value;
     inputName.value = "";
}

function nrCoinss() {
     // 先把输入值存入全局变量，兼容空输入的情况默认赋值为0
     coinCount = inputNr.valueAsNumber || 0;
     nrCoins.innerHTML = coinCount;
     inputNr.value = "";
     // 数值更新后重新计算总价
     updateTotal();
}

function coinValuee() {
     // 先把输入值存入全局变量，兼容空输入的情况默认赋值为0
     singlePrice = inputValue.valueAsNumber || 0;
     coinValue.innerHTML = singlePrice + "$";
     inputValue.value = "";
     // 数值更新后重新计算总价
     updateTotal();
}

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