我正在尝试为一家服装店制作一个计算器，用户可以输入3个价格，计算这3个价格的总和，扣除保真金额，扣除15%的税并显示总数。我无法做的是显示一条消息，显示总计是...
这是我尝试过的代码:
<html>
<head>
<script type="text/javascript">
function Bal(){
let w = document.getElementById('txtP1').value;
let x = document.getElementById('txtP2').value;
let y = document.getElementById('txtP3').value;
let z = document.getElementById('txtFid').value;
var Add = parseInt(w)+ parseInt(x)+ parseInt(y);
var Fid = Add-parseInt(z);
var Bal = Fid * 0.85;
document.getElementById('Bal').innerText = "Total is: " + Bal;
}
</script>
</head>
<body>
<h2>Body & Soul </h2>
<form>
Price 1: <input type="text" id="txtP1"><br>
Price 2: <input type="text" id="txtP2"><br>
Price 3: <input type="text" id="txtP3"><br>
Fidelity Amount: <input type="text" id="txtFid"><br>
<button onClick="Bal(txtP1.value,txtP2.value,txtP3.value,txtFid.value)">Total</button>
<div id='Bal'></div>
</form>
</body>
</html>
如何显示“总计为..”的消息
最佳答案
您的代码有效，但您的表单正在提交，但您看不到结果。为了防止这种情况发生，请使用 preventDefault在按钮的单击事件上。
我稍微修改了您的代码，将内联 JS 与 HTML 分开，这可能会使其更易于理解。
function bal(event) {
event.preventDefault();
let w = document.getElementById('txtP1').value;
let x = document.getElementById('txtP2').value;
let y = document.getElementById('txtP3').value;
let z = document.getElementById('txtFid').value;
var add = parseInt(w) + parseInt(x) + parseInt(y);
var fid = add - parseInt(z);
var bal = fid * 0.85;
document.getElementById('bal').innerText = "Total is: " + bal;
}
const submit = document.querySelector('button');
submit.addEventListener('click', bal, false);<h2>Body & Soul </h2>
<form>
Price 1: <input type="text" id="txtP1"><br>
Price 2: <input type="text" id="txtP2"><br>
Price 3: <input type="text" id="txtP3"><br>
Fidelity Amount: <input type="text" id="txtFid"><br>
<button>Total</button>
<div id="bal"></div>
</form>更多文档
关于javascript - 使用 javascript 的服装计算器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59049462/