感谢您的光临！我有一段工作代码here at JSFiddle
这是一种基本的计算器，它接受4个值，通过一个函数运行它们并吐出结果。在我尝试重构代码之前，它按预期工作。一旦我尝试至少像this那样重构它，无论做什么我都会得到NaN或0。
这是原始代码本身
<!DOCTYPE html>
<html>
<body>
<input type="number" id="bp" placeholder="Buying price">
<input type="number" id="n" placeholder="Amount">
<input type="number" id="sp" placeholder="Selling price">
<input type="number" id="t" placeholder="Tax % (1 by def, 3 prem)">
<button id="button" onclick="profit()">Get rich!</button>
<input type="text" id="r" placeholder="Profit (unless ganked)">
<button id="button" onclick="resetOnClick()">More!</button><br>
<p>Thank HumbleOldMan later, go get rich now.</p>
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");
}
//出于某种原因不能将分配的变量用于DOM引用。必须是bs范围，或者我只是一个菜鸟//
这是我尝试做的
<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>
这个问题很普遍。我究竟做错了什么？我绝对不会适应拳头版本并习惯做这样的事情。任何帮助将不胜感激。
答案 0 :(得分：1)
单击后，您必须获取输入字段的值，而不是页面加载时，它会为NaN赋值，因为最初所有内容都是空的。进入calcProfit函数内部，以便获取更新的值。