正在尝试创建定价计算器，但单击"计算"时没有显示任何内容

Question

代码是基于模板的，我对Javascript很陌生，但从我所知，一切都应该很好。然而，当我测试它时，结果框中什么都没有显示，我不知所措。

我正在尝试创建一个定价计算器，它将给出估计预算和投资回报。

估计预算的实际数学为=(额外收入(/(平均房价/平均佣金(x 100/12 x 5

投资回报率的数学公式为=额外收入-估计预算

这是Javascript代码：

<script>
document.getElementById("loan-form").addEventListener("submit", 
computeResults);
function computeResults(e) {
// UI
const UIadditionalincome = 
document.getElementById("additionalincome").value;
const UIaveragecommission = 
document.getElementById("averagecommission").value;
const UIaveragehouseprice = 
document.getElementById("averagehouseprice").value;
// Calculate
const income = parseFloat(UIadditionalincome);
const CalculateCommission = parseFloat(UIaveragehouseprice) / 
(UIaveragecommission);
//Estimated Budget
const x = Math.pow (income / CalculateCommission);
const EstimatedBudget = (x * 100 / 12 * 5).toFixed(2);
//ROI
const roi = (additionalincome - totalEstimatedBudget).toFixed(2);
//Show results
document.getElementById("EstimatedBudget").innerHTML = "$" + 
EstimatedBudget;
document.getElementById("roi").innerHTML = "$" + roi;
e.preventDefault();
}
</script>

如果需要，这里有HTML：

<div class="columns">
<div class="column is-three-quarters">
<div class="card">
<div class="card-content">
<form id="loan-form">
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">1</p>
Additional Income
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="additionalincome" 
type="number" />
<span class="icon is-small is-left">
<i class="fa fa-dollar-sign"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
Average Commission
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="averagecommission" 
type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">3</p>
Average House Price
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left">
<input class="input" id="averagehouseprice" 
type="number" />
<span class="icon is-small is-left">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="control">
<button
class="button is-large is-fullwidth is-primary is- 
outlined"
>
Calculate
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- RESULTS -->
<section class="section">
<h1 class="title ">Calculated Results</h1>
<div class="columns is-multiline">
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-primary has-text">
<p id="EstimatedBudget" class="title is-1">$</p>
<p class="subtitle is-4">Estimated Budget</p>
</div>
</div>
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-info has-text">
<p id="roi" class="title is-1">$</p>
<p class="subtitle is-4">ROI</p>
</div>
</div>
</div>
</section>

Answer 1

首先，我想指出Java和JavaScript是不同的语言。

问题似乎是，在您完成计算后，您的调用会阻止默认值。只需将e.preventDefault移动到函数的顶部即可。