Javascript 如何使用DOM引用的.value'；它在不同的范围内？（重构/范围问题）_Javascript_Html_Dom_Scope_Refactoring

Javascript 如何使用DOM引用的.value'；它在不同的范围内？（重构/范围问题）

javascript html dom

Javascript 如何使用DOM引用的.value'；它在不同的范围内？（重构/范围问题）,javascript,html,dom,scope,refactoring,Javascript,Html,Dom,Scope,Refactoring,谢谢你过来！我有一段工作代码这是一种基本类型的计算器，它接受4个值，通过一个函数运行它们，然后输出结果。在我尝试重构代码之前，它一直按预期工作。只要我试着重构它，至少像这样，无论我做什么，都会得到NaN或0 这是原始代码本身 <!DOCTYPE html> <html> <body> //由于某种原因，无法将分配的变量用于DOM引用。一定是个傻瓜，不然我就是个傻瓜// 这就是我试着做的 <script type="text/javascript

谢谢你过来！我有一段工作代码

这是一种基本类型的计算器，它接受4个值，通过一个函数运行它们，然后输出结果。在我尝试重构代码之前，它一直按预期工作。只要我试着重构它，至少像这样，无论我做什么，都会得到NaN或0

这是原始代码本身

<!DOCTYPE html>
<html>
<body>

//由于某种原因，无法将分配的变量用于DOM引用。一定是个傻瓜，不然我就是个傻瓜//

这就是我试着做的

<script type="text/javascript">
    var bp = Number(document.getElementById("bp").value);
    var n = Number(document.getElementById("n").value);
    var sp = Number(document.getElementById("sp").value);
    var t = Number(document.getElementById("t").value);
    var r = Number(document.getElementById("r").value);
    var result; 

    var calcProfit = function(bp,n,sp,t,r){ 
        var result = Math.floor((sp*n-(sp*n/100)*t)-bp*n)
        console.log(Number(result));
        r = Number(result);
    }

    var resetOnClick = function(){
      document.getElementById("t").value =
      document.getElementById("sp").value =
      document.getElementById("n").value =
      document.getElementById("bp").value = "";
      console.log("reset clicked");
    } 
  </script>


var bp=编号（document.getElementById（“bp”）.value）；
var n=编号（document.getElementById（“n”）.value）；
var sp=编号（document.getElementById（“sp”）.value）；
var t=编号（document.getElementById（“t”）.value）；
var r=编号（document.getElementById（“r”）.value）；
var结果；
var calcProfit=函数（bp，n，sp，t，r）{
var结果=数学下限（（sp*n-（sp*n/100）*t）-bp*n）
控制台日志（编号（结果））；
r=数量（结果）；
}
var resetOnClick=function（）{
document.getElementById（“t”）值=
document.getElementById（“sp”）值=
document.getElementById（“n”）值=
document.getElementById（“bp”）.value=“”；
console.log（“单击重置”）；
}

这个问题很常见。我做错了什么？我绝对不会满足于第一个版本，并习惯于这样做。我们将非常感谢您的帮助

您必须在单击后获取输入字段的值，而不是在页面加载时获取输入字段的值，页面加载将为NaN赋值，因为最初所有字段都为空。进入

calcProfit

函数，以便获取更新的值。

我们可以获取您的HTML代码吗？是的，添加了所有内容。您在页面加载时获得的字段值，而不是单击。True。这就是我一直错过的，谢谢

var profit = function(){    

  var bp = document.getElementById("bp").value;
  var n = document.getElementById("n").value;
  var sp = document.getElementById("sp").value;
  var t = document.getElementById("t").value;
    var result = Math.floor((sp*n-(sp*n/100)*t)-bp*n)
    console.log(result);
    document.getElementById("r").value = result;
}

var resetOnClick = function(){
  document.getElementById("t").value =
  document.getElementById("sp").value =
  document.getElementById("n").value =
  document.getElementById("bp").value = "";
  console.log("reset clicked");
}

<script type="text/javascript">
    var bp = Number(document.getElementById("bp").value);
    var n = Number(document.getElementById("n").value);
    var sp = Number(document.getElementById("sp").value);
    var t = Number(document.getElementById("t").value);
    var r = Number(document.getElementById("r").value);
    var result; 

    var calcProfit = function(bp,n,sp,t,r){ 
        var result = Math.floor((sp*n-(sp*n/100)*t)-bp*n)
        console.log(Number(result));
        r = Number(result);
    }

    var resetOnClick = function(){
      document.getElementById("t").value =
      document.getElementById("sp").value =
      document.getElementById("n").value =
      document.getElementById("bp").value = "";
      console.log("reset clicked");
    } 
  </script>