如何將這個 function 添加到我的小費計算器中？
[英]How can I add this function into my tip calculator?
問題描述
我是新程序員，試圖在我的小費計算器中添加一個 function，以通知用戶賬單不均。 例如，如果 3 個人試圖平分一張 100 美元的賬單，誰會支付最后一分錢？
我想我做這個 function 可能是在正確的道路上
function payTheDifference() {
total % 3 === 0
return "someone needs to pay the difference 1 cent" }
但我無法在不與我現有的代碼沖突的情況下添加它。
這是我的 HTML 和 JavaScript 代碼
const billInput = document.getElementById('billTotalInput'); const tipInput = document.getElementById('tipInput') const numberOfPeopleDiv = document.getElementById('numberOfPeople'); const perPersonTotalDiv = document.getElementById('perPersonTotal'); let numberOfPeople = Number(numberOfPeopleDiv.innerText) function payTheDifference() { total % 3 === 0 return "someone needs to pay the difference 1 cent" } const calculateBill = () => { const bill = Number(billInput.value); const tipPercent = Number(tipInput.value) / 100; const totalAmount = bill * tipPercent; const total = totalAmount + bill; const perPersonTotal = total / numberOfPeople; perPersonTotalDiv.innerText = `$${perPersonTotal.toFixed(2)}` }; const increasePeople = () => { numberOfPeople += 1 numberOfPeopleDiv.innerText = numberOfPeople calculateBill() }; const decreasePeople = () => { if(numberOfPeople <= 1){ return } numberOfPeople -= 1 numberOfPeopleDiv.innerText = numberOfPeople calculateBill() };
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <h1>Group Pay</h1> <p>Pay as a group. This app will calculate your total bill(With tip.) and allow you divide it evenly with your friends.</p> <div class="container" id="topContainer"> <div class="title">Bill total</div> <div class="inputContainer"> <span>$</span> <input onkeyup="calculateBill()" type="text" id="billTotalInput" placeholder="0.00" /> </div> </div> <div class="container"> <div class="title">Tip</div> <div class="inputContainer"> <span>%</span> <input onkeyup="calculateBill()" type="text" id="tipInput" placeholder="10" /> </div> </div> <div class="container" id="bottom"> <div class="splitContainer"> <div class="title">People</div> <div class="controls"> <span class="buttonContainer"> <button class="splitButton" onclick="increasePeople()"> <span class="buttonText">+</span> </button> </span> <span class="splitAmount" id="numberOfPeople">1</span> <span class="buttonContainer"> <button class="splitButton" onclick="decreasePeople()"> <span class="buttonText">-</span> </button> </span> </div> </div> <div class="totalContainer"> <div class="title">Total per Person</div> <div class="total" id="perPersonTotal">$0.00</div> </div> </div> <div class="goBack"> <a href="../index.html"> <button class="back">Click me to go back to the home page</button> </a> </div> </div> <script src="index.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2022-09-30 21:13:13
payTheDifference()應該返回額外的金額。 然后calculateBill()可以檢查它是否非零，並適當地顯示它。
const billInput = document.getElementById('billTotalInput'); const tipInput = document.getElementById('tipInput') const numberOfPeopleDiv = document.getElementById('numberOfPeople'); const perPersonTotalDiv = document.getElementById('perPersonTotal'); const differenceContainerDiv = document.getElementById("differenceContainer"); const differenceDiv = document.getElementById("difference"); let numberOfPeople = Number(numberOfPeopleDiv.innerText) function payTheDifference(total, persons) { return Math.round(total * 100) % persons; } const calculateBill = () => { const bill = Number(billInput.value); const tipPercent = Number(tipInput.value) / 100; const totalAmount = bill * tipPercent; const total = totalAmount + bill; const perPersonTotal = total / numberOfPeople; perPersonTotalDiv.innerText = `$${perPersonTotal.toFixed(2)}` const diff = payTheDifference(total, numberOfPeople); if (diff > 0) { differenceContainerDiv.style.display = 'block'; differenceDiv.innerText = `${diff} cents`; } else { differenceContainerDiv.style.display = 'none'; } }; const increasePeople = () => { numberOfPeople += 1 numberOfPeopleDiv.innerText = numberOfPeople calculateBill() }; const decreasePeople = () => { if (numberOfPeople <= 1) { return } numberOfPeople -= 1 numberOfPeopleDiv.innerText = numberOfPeople calculateBill() };
.differenceContainer { display: none; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <h1>Group Pay</h1> <p>Pay as a group. This app will calculate your total bill(With tip.) and allow you divide it evenly with your friends.</p> <div class="container" id="topContainer"> <div class="title">Bill total</div> <div class="inputContainer"> <span>$</span> <input onkeyup="calculateBill()" type="text" id="billTotalInput" placeholder="0.00" /> </div> </div> <div class="container"> <div class="title">Tip</div> <div class="inputContainer"> <span>%</span> <input onkeyup="calculateBill()" type="text" id="tipInput" placeholder="10" /> </div> </div> <div class="container" id="bottom"> <div class="splitContainer"> <div class="title">People</div> <div class="controls"> <span class="buttonContainer"> <button class="splitButton" onclick="increasePeople()"> <span class="buttonText">+</span> </button> </span> <span class="splitAmount" id="numberOfPeople">1</span> <span class="buttonContainer"> <button class="splitButton" onclick="decreasePeople()"> <span class="buttonText">-</span> </button> </span> </div> </div> <div class="totalContainer"> <div class="title">Total per Person</div> <div class="total" id="perPersonTotal">$0.00</div> </div> <div class="differenceContainer" id="differenceContainer"> <div class="title">Someone needs to pay the difference</div> <div class="total" id="difference">0 cents</div> </div> </div> <div class="goBack"> <a href="../index.html"> <button class="back">Click me to go back to the home page</button> </a> </div> </div> <script src="index.js"></script> </body> </html>
如何使用 JavaScript 為我的計算器項目創建一個可以添加文本的框？
[英]How to create a box where I can add text using JavaScript for my calculator project?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.