Javascript 在页面上给我一个 NaN 但在控制台中给我一个数字？答案

【问题标题】：Javascript giving me a NaN on page but a number in console?Javascript 在页面上给我一个 NaN 但在控制台中给我一个数字？
【发布时间】：2021-04-26 22:59:33
【问题描述】：

这是我编写的更新脚本

<script>
  let num1=parseFloat(document.querySelector('#origin').value)
  let num2=parseFloat(document.querySelector('#added').value)
  let calcProfit=parseFloat(100-num2)
  let btn=document.querySelector('#submit')
  btn.addEventListener("click", function(event){
      event.preventDefault()
      const initResult=num1/calcProfit
      const finalResult=initResult*100
      document.querySelector('span').innerHTML=`${finalResult.toFixed(3)}`
      console.log(typeof(finalResult))
      if (finalResult.toString().length>3 && finalResult.toString().length<7){
          const k=finalResult/1000
          document.querySelector('span').innerHTML=`${k.toFixed(1)}k`
        }
        if (finalResult.toString().length>6 && finalResult.toString().length<10){
            const m=finalResult/1000000
            document.querySelector('span').innerHTML=`${m.toFixed(1)}M`
        }
    });
   let clr=document.querySelector('#clear');
    clr.addEventListener("click", function(e){
        window.location.reload()
    })

在第一次运行时它显示 NaN，但是当我重新加载页面时一切正常。我怀疑 clear 函数，因为当我第一次编写它时，它没有给出任何错误，但整个应用程序表现得很突然。在这个版本中，清除按钮会删除结果但不会影响它，所以当我输入新数字时，它会给我旧的结果。我试过innerHTML，但还是不行。

【问题讨论】：

如果你构建一个 sn-p 来显示行为会很有帮助
你有多个多余的parseFloats，parseFloat(document.querySelector('span').innerHTML=`${k.toFixed(1)}k`)给DOM增加了一个值，但是parseFloat的返回值从来没有使用过。

标签： javascript nan

【解决方案1】：

我从这里得到了答案 javascript error [object HTMLInputElement][object HTMLInputElement]

造成这个错误的因素有两个，我一直使用多个变量进行一次计算并使用解析方法。它不再显示 NaN，但重新加载问题仍然存在。

【讨论】：