JavaScript函数输出不持久的问题
JavaScript函数输出不持久的问题
提问于 2019-12-11 07:49:06
这是我代码的一部分。数学和一切都在正常工作。我的问题是什么时候点击“提交”按钮。它通过这段代码运行，所有的变量和输入都被正确保存。我的问题是，在页面重新加载之前，我的输出、‘Payment’和"pi“会显示在网站的一个框架中。有没有办法让输出和用户在字段中输入的内容一样保持不变？
<div id="div7" class="square">
<h1 padding-top="20px">Loan Information</h1>
<form>
<div class="col-25">Years</div><div class="col-75"><input type="number" id="years" min="0"></div><br>
<div class="col-25">Interest</div><div class="col-75"><input type="number" id="rate" min="0"></div><br>
<div class="col-25">Loan Amount</div><div class="col-75"><input type="number" id="amount" min="0"></div><br>
<button onclick="myFunction()">Calculate</button>
<input type="reset" value="Reset">
<h1 padding-top="25px">Loan Details</h1><br>
<div class="col-25">Monthly Payment</div><div class="col-75">:<output id="payment"></output></div><br>
<div class="col-25">P/I</div><div class="col-75">:<output id="pi"</output></div><br>
</form>
</div>
<script>
function myFunction(){
amt=eval(document.getElementById("amount").value);
yrs=eval(document.getElementById("years").value)*12;
rte=eval(document.getElementById("rate").value)/1200;
pmt=(rte+(rte/(Math.pow((1+rte),(yrs))-1)))*amt;
pmt=pmt*100;
mpt=Math.round(pmt);
pmt = pmt/100;
pi = (pmt*yrs)*100;
pi = Math.round(pi);
pi=pi/100;
document.getElementById("payment").innerHTML = payment ;
document.getElementById("pi").innerHTML = pi;
}
</script>回答 1
Stack Overflow用户
发布于 2019-12-11 08:12:07
更改您的：
<button onclick="myFunction()">Calculate</button>
至：
<button onclick="return myFunction()">Calculate</button>
此外，请注意，您没有定义任何变量，这将使您的代码在未来无法维护，您创建的所有内容都是全局的。
这里有一个有效的示例，请注意，我必须定义payment值，因为它没有定义。
function myFunction(e) {
//payment was not define so I'll just leave a 100 :)
payment = 100;
amt = eval(document.getElementById("amount").value);
yrs = eval(document.getElementById("years").value) * 12;
rte = eval(document.getElementById("rate").value) / 1200;
pmt = (rte + (rte / (Math.pow((1 + rte), (yrs)) - 1))) * amt;
pmt = pmt * 100;
mpt = Math.round(pmt);
pmt = pmt / 100;
pi = (pmt * yrs) * 100;
pi = Math.round(pi);
pi = pi / 100;
console.log(payment)
document.getElementById("payment").innerHTML = payment;
document.getElementById("pi").innerHTML = pi;
return false;
}<div id="div7" class="square">
<h1 padding-top="20px">Loan Information</h1>
<form>
<div class="col-25">Years</div>
<div class="col-75"><input type="number" id="years" min="0"></div><br>
<div class="col-25">Interest</div>
<div class="col-75"><input type="number" id="rate" min="0"></div><br>
<div class="col-25">Loan Amount</div>
<div class="col-75"><input type="number" id="amount" min="0"></div><br>
<button onclick="return myFunction()">Calculate</button>
<input type="reset" value="Reset">
<h1 padding-top="25px">Loan Details</h1><br>
<div class="col-25">Monthly Payment</div>
<div class="col-75">:<output id="payment"></output></div><br>
<div class="col-25">P/I</div>
<div class="col-75">:<output id="pi" </output></div><br>
</form>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59277004
复制相关文章
相似问题
腾讯云开发者
