使用JavaScript的服装计算器
[英]Clothing calculator using javascript
问题描述
我正在尝试为服装店制造一个计算器，用户可以输入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>
如何显示“总计是..”消息
5 个解决方案
解决方案1
2 已采纳 2019-11-26 11:27:50
您的代码有效，但您的表单正在提交，但看不到结果。 为了防止这种情况发生，请在按钮的click事件上使用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>
进一步的文件
解决方案2
1 2019-11-26 11:14:38
尝试这个
<html>
<head>
</head>
<body>
<h2>Body & Soul </h2>
<form onSubmit="Bal()">
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 type="submit">Total</button>
<div id='Bal'></div>
</form>
</body>
<script type="text/javascript">
function Bal(){
event.preventDefault();
event.stopPropagation();
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>
</html>
在此示例中，您不必在函数中包含参数，因为您已经在函数中获取了它们的值。
另一个选择是：
<form>
// Your code here
<button type="click" onClick="Bal()">Get Bal</button>
</form>
解决方案3
1 2019-11-26 11:14:45
提交表单时，浏览器将重新加载页面。 要阻止该默认操作，请按以下方式使用event.preventDefault() 。
<form onsubmit="event.preventDefault()">
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>
解决方案4
0 2019-11-26 11:18:23
您应该使用以下代码更新代码。
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; }
#total{ cursor : pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> <p id="total" onClick="Bal(txtP1.value,txtP2.value,txtP3.value,txtFid.value)">Total</p> <div id='Bal'></div> </form> </body>
解决方案5
-1 2019-11-26 11:13:36
老实说，我无法完全理解您的意思，因为我将代码复制并粘贴到HTML文档中，并且效果很好：)，但是我想您的问题是在单击“总计”按钮后刷新了页面。 我对吗？ 为此，请在您的按钮属性中添加“ type =“ button””以解决该问题。 您的代码是正确的！
使用JavaScript的计算器除法
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.