哈囉,在上集我們初步的把計算機的加總功能做出來了,但是不對啊~
我們不單單是要計算客人點幾個漢堡、幾杯可樂,我們是要幫助店員知道這樣總共要多少錢才對呀!
此時撰寫程式一個重要的邏輯就產生了,既然想知道漢堡2個是多少錢,前提是得先定義漢堡一個到底是多少錢,這個階段是我當初在學 JavaScript 時開始感受到原來我們要實作一個功能,我們可以先把一個功能拆分成一個個小單位這樣會比較容易開始,比方說如果光是這樣想要 把幾個漢堡幾杯可能相加得知總價是多少? 這樣感覺好像挺困難又抽象,但是我如果先得知每個產品的單價不就容易多了嗎?
於是我們可以先在函式內建立兩個變數,分別是漢堡的價格與可樂的價格
像是下面這樣:
document.getElementById('count').onclick = function(){
var hamprice = 60; //漢堡的價格
var cokeprice = 30; //可樂的價格
}
這邊價格就自己隨便設定拉!
接下來我們在上一篇不是已經寫好取得 input 內數值的方法了嗎,這樣我們只需要再把取出來的數值,再乘上每一個產品的單價~
像下方範例一樣
document.getElementById('count').onclick = function(){
var hamprice = 30;
var cokeprice = 20;
var hamNum = parseInt(document.getElementById('ham').value)*hamprice;
var cokeNum = parseInt(document.getElementById('coke').value)*cokeprice;
document.getElementById('total').textContent = hamNum+cokeNum;
}
有木有~是不是已經可以成功地計算出客人買的產品總共要多少錢了呢!
是否開始感覺到程式的運作邏輯,也算是完成自己的一個小小應用程式了呢,如果想要把此計算機功能變得更加完善,當然你也可以自行增加更多功能讓自己的成就感更大!
例如可以增加以下功能:
接下來就讓大家自行去練習與發揮囉,下一篇我們繼續來介紹關於 JS 你要知道更多的知識點。