A Tippkalkulátor olyan számológép, amely a teljes számla százaléka alapján kiszámítja a borravalót.
Most építsünk egyet.
1. lépés - HTML:
Létrehozunk egy űrlapot a kívánt összeg megadásához:
Tip Calculator Tip Calculator
$ Tip: Results
Tip amount Total Bill with Tip
2. lépés - CSS:
Megtervezi a stílust, ahogy akarja. A CSS segítségével elrejtheti az eredményeket, és a JavaScript-en keresztül megjelenítheti őket, miután a felhasználó kitölti az űrlapot:
#results { display:none; }
3. lépés: JavaScript:
Hozzáadunk egy onchange eseményt. Az onchange esemény akkor következik be, amikor a felhasználó interakcióba lép az űrlappal.
Ez a művelet végrehajt egy olyan függvényt, amely kiszámítja a végső számla összegét a százalékos tipp alapján, majd visszaadja az eredményeket.
document.querySelector('#tip-form').onchange = function(){ var bill = Number(document.getElementById('billTotal').value); var tip = document.getElementById('tipInput').value; document.getElementById('tipOutput').innerHTML = `${tip}%`; var tipValue = bill * (tip/100) var finalBill = bill + tipValue console.log(finalBill) var tipAmount = document.querySelector('#tipAmount') var totalBillWithTip = document.querySelector('#totalBillWithTip') tipAmount.value = tipValue.toFixed(2); totalBillWithTip.value =finalBill.toFixed(2); //Show Results document.getElementById('results').style.display='block' }
Működő példát és annak kódját a Codepen.io oldalon tekintheti meg.