בפוסט זה הסביר כיצד ניתן ליצור חישובים מתמטיים On the fly בדף HTML.
אז בואו נראה למה אני מתכוון, במחשבון שנראה כאן, אני יכול להכניס ערכים של מחיר מוצר ומחיר הנחה והמחשבון יפלוט לי את אחוזי ההנחה לפי הפרמטרים:
ניתן לראות כי אחוזי ההנחה משתנים באופן דינאמי בהתאם לערכים המוצבים בשתי השדות האחרים: מחיר מחירון ומחיר הנחה.
הערך ההתחלתי אגב הינו 50 אחוזים והוא הוכנס Hard Coded.
אז איך עושים זאת ?
בואו קודם נציץ על החלק ה-HTMLי של הקוד:
<label for="prodprice">Product Price</label>
<input type="text" id="prodprice" name="prodprice" size="5" value="200" onkeyup="calculatePercentage(this.value, document.getElementById('newprice').value)">
<br/>
<label for="newprice">Sale Price</label>
<input type="text" id="newprice" name="newprice" size="5" value="100" onkeyup="calculatePercentage(document.getElementById('prodprice').value, this.value)">
<br/>
<div><strong>You have saved</strong> <span id="results" style="color: green; font-size: 1.5em;">50</span> <strong>%</strong></div>
אנחנו רואים כי לשני שדות הטקסט הגדרנו Event שנקרא: onkeyup שאומר – תפעיל פונקציונליות מסויימת ברגע הכנסת תווים לשדה (ליתר דיוק, onkeyup יורה event ברגע שתו במקלדת משוחרר). לכן ברגע שננקליד תווים חדשים בשדה, תתבצע קריאה לפונקציה calculatePercentage עם הערך החדש שאותו הכנסנו (נתפוס אותו על ידי – getElementById הייחודי לשדה).
את הפונקציה calculatePercentage, נגדיר כך:
function calculatePercentage (oldval, newval)
{
percentsavings = ((oldval - newval) / oldval) * 100;
document.getElementById("results").innerHTML = Math.round(percentsavings*100)/100;
}
את התוצאה הפונקציה תזרוק אל תוך container שיש לו id=results , במקרה שלנו, בתחתית העמוד.
שימו לב כי התוצאה עוגלה לעד 2 ספרות לאחר הנקודה העשרונית. וזה דרך הפקודה שנתנו לו – Math.round(percentsavings*100)/100
