到第六天囉，今天我們要透過前面學到的如何選取 HTML 的元素以及更改元素的內容和儲存變數，雖然目前學的還不多，但今天會分享怎麼整合運用這些前幾篇學的方法來體會程式的感覺囉！

前一天提到變數可以把東西存起來，存起來的型態有數字、字串等等的...那這邊要分享的是其實存起來的變數也可以用來做加減乘除喔！

比方說下面這段語法：

var milkprice = 60;
var discount = 20;
var total = milkprice - discount;
alert(total);

讓我來用白話文解釋一下上面在做什麼，先建立兩個變數一個是牛奶的價格，一個是折扣多少錢，然後再建立一個加總的變數 total，沒錯我們可以直接透過變數的名稱進行加總，為了驗證結果這邊你可以使用 alert 或是 console 都可以，就可以查詢結果是 60-20 等於 40了。

到這邊有沒有程式運作的感覺了呢....

延續這份感覺，我們再來整合目前所學來寫一點程式的吧
首先我們寫下方這些程式碼：

HTML

<h2>今天我要去好市多買牛奶，每瓶<span id="milk"><span>元</h2>
<h2>剛好有折扣，每瓶可以折扣<span id="pricecut"></span>元</h2>
<h2>總共<span id="total"></span>元</h2>

javaScript

// 先建立變數
var milkprice = 60;
var discount = 20;
var total = milkprice - discount;

// 更改 HTML 內容
document.getElementById('milkprice').textContent = milkprice;
document.getElementById('discount').textContent = discount;
document.getElementById('total').textContent = total;

直接看 Demo

你就可以發現！我們已經成功的透過變數再結合 getElementById 選取 HTML 的 id 以及使用 textContent 去帶入變數的內容，當然不一定要用減法，加減乘除大家都可以試一試玩玩看囉！
下一篇即將來分享在 JavaScript 中超重要的概念，函式。

這篇我的變數名稱命名或許不太好，大家可以去參考程式基礎概念─變數命名規則這篇文章，探討關於變數的命名。