gpt4 book ai didi

javascript - 表单 onsubmit 运行函数但更改不会持续

转载 作者:行者123 更新时间:2023-12-01 00:55:33 26 4
gpt4 key购买 nike

我正在创建一个小型金融计算器。这是第一次的事情。我希望表单接收数字作为变量,并希望表格使用该变量进行计算。我想使用表单,以便返回按钮可以提交条目。

input 时,这可以正常工作。使用onchange该函数的监听器。当我尝试合并<input type="submit" />时然而,DOM 会用正确的计算进行更新,然后消失。

使用onsubmit有什么用?不能正常运行功能?是onsubmit运行函数后刷新 DOM?

解决此类问题的最佳实践是什么?

谢谢,会

HTML:

function update() {

let initialGain = Number(document.getElementById('initialGain').value);
let initialFedTax = initialGain * .238;
let capAvail = initialGain - initialFedTax;
let newValue = capAvail * (1+ .09 * 10);
let newValueB = initialGain * (1+ .09 * 10);
let tax85 = initialFedTax * .85
let tax2029 = (newValue - capAvail) * .238;
let afterTax = newValue - tax2029;
let afterTaxB = newValueB - tax85;
let netProfit = afterTax - initialGain;
let netProfitB = afterTaxB - initialGain;

// Capital Gain

document.getElementById('capitalGain').innerHTML = "$" + currency(initialGain);
document.getElementById('capitalGainB').innerHTML = "$" + currency(initialGain);

// Top Federal Tax Paid on Original Capital Gain, 23.8%

document.getElementById('initialFedTax').innerHTML = "$" + currency(initialFedTax);

// Capital Available for a "New Investment" in 2019

document.getElementById('capAvail').innerHTML = "$" + currency(capAvail);
document.getElementById('capAvailB').innerHTML = "$" + currency(initialGain);

// Value of New Investment After 10 Years

document.getElementById('newValue').innerHTML = "$" + currency(newValue);
document.getElementById('newValueB').innerHTML = "$" + currency(newValueB);

// Top Federal Tax on 85% of Original Gain due Dec 31, 2026

document.getElementById('tax85').innerHTML = "(" + currency(tax85) + ")";

// Top Federal Tax on Disposition of New Investment in 2029

document.getElementById('tax2029').innerHTML = "(" + currency(tax2029) + ")";

// After Tax Proceeds

document.getElementById('afterTax').innerHTML = "(" + currency(afterTax) + ")";
document.getElementById('afterTaxB').innerHTML = "(" + currency(afterTaxB) + ")";

// Less: Original Gain

document.getElementById('originalGain').innerHTML = "(" + currency(initialGain) + ")";
document.getElementById('originalGainB').innerHTML = "(" + currency(initialGain) + ")";

// Net Profit

document.getElementById('netProfit').innerHTML = "$" + currency(netProfit);
document.getElementById('netProfitB').innerHTML = "$" + currency(netProfitB);

var x = document.getElementsByClassName('test')
x[0].style.backgroundColor = 'red';
x[0].style.width = '10px';
x[0].style.height = '10px';

}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="calculator.css">
<script src="calculator.js"></script>

</head>
<body>
<h1>
Calculator
</h1>
<form onsubmit=update()>
<input
type="number"
id="initialGain"
placeholder="$1,000,000" />
<input
type="submit"
value="click" />
</form>
<input
type="checkbox"
id="toggle" />
<table>
<caption>After-Tax Net Profit Investment Comparison</caption>
<thead>
<tr>
<td></td>
<td>TAXABLE GAINS<br/>(Long Term)</td>
<td>1 American Elite™</td>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Capital Gain</strong></td>
<td id="capitalGain"></td>
<td id="capitalGainB"></td>
</tr>
<tr>
<td><strong>Top Federal Tax Paid on Original Gain</strong><br/><em>23.8%</em></td>
<td id="initialFedTax"></td>
<td id="rLong">-</td>
</tr>
<tr>
<td><strong>Capital Available for a "New Investment" in 2019</strong></td>
<td id="capAvail"></td>
<td id="capAvailB"></td>
</tr>
<tr>
<td><strong>Value of New Investment after 10 years</strong> <br/> <em>9% Simple</em></td>
<td id="newValue"></td>
<td id="newValueB"></td>
</tr>
<tr>
<td><strong>Top Federal Tax on 85% of Original Gain due Dec 31, 2026</strong><br/> <em>23.8%</em></td>
<td></td>
<td id="tax85"></td>
</tr>
<tr>
<td><strong>Top Federal Tax on Disposition of New Investment in 2029</strong><br/> <em>23.8%</em></td>
<td id="tax2029"></td>
<td></td>
</tr>
<tr>
<td><strong>After Tax Proceeds</strong></td>
<td id="afterTax"></td>
<td id="afterTaxB"></td>
</tr>
<tr>
<td>Less: Original Gain</td>
<td id="originalGain"></td>
<td id="originalGainB"></td>
</tr>
<tr>
<td><strong>Net Profit</strong><br/><em>(After Federal Tax on Original Gain and New Investment)</em></td>
<td id="netProfit"></td>
<td id="netProfitB"></td>
</tr>
</tbody>
</table>
<div class="test"></div>
</body>
</html>

最佳答案

是的,默认情况下onsubmit通过HTTP发送表单内容以供服务器端处理,因此站点被刷新。为了避免这种情况,请将 return false; 添加为更新函数的最后一个语句,并将 onsubmit=update() 替换为 onsubmit="return update();"

要使此功能正常工作,您的函数必须没有错误。否则,将无法到达 return false; 行,并且浏览器会刷新页面。

关于javascript - 表单 onsubmit 运行函数但更改不会持续,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56606395/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com