上節課在網頁上使用JavaScript實現了根據輸入日期計算星座的程序。
這節課來做一個算24點遊戲，主要是練習使用JavaScript來控制網頁元素。
程序設計思路
在第1章的教程裡面，學習過如何編寫算法來計算給出4個1到13之間的數字來求出所有的算出24點的算法。
這節課就不做算法了，來在網頁上實現這個遊戲。
遊戲規則是這樣的：網頁加載後，顯示4個隨機數，範圍是從1到13之間，可以重複。同時顯示4個運算法，加減乘除。
然後在下方顯示5種運算次序，然後可以通過點擊數字或者運算符，將數字或運算符進行移動，當將一個運算次序填滿之後，程序會進行計算，假如結果等於24，則提示回答正確並將分數加1分，同時題目數加1，進入下一道題目。
大致的顯示界面是這樣的：
網頁元素的邊框為紅色顏色時，表示該元素被選中了。選中某個元素之後，點擊其它空白元素，可以將當前選中的元素移動過去。
如果選中的元素時運算符需要清除，則可以點擊運算符元素右側的清除按鈕。
這是因為運算符可以重續選用多個，因此採用此種處理方式。
因此，網頁的JavaScript當中，要存儲一個當前的元素的代表值。因此需要給每一個元素都指定一個編號，可以如下圖一般：
編寫頁面顯示效果
創建3個文件，get24.html，get24.css，get24.js。
首先來編寫網頁的內容和相應的顯示樣式，可以參考前面四則運算器的樣式。
同時給每個元素增加onclick="dc(this.id);"事件。
get24.html代碼如下：
get24.css代碼如下：
瀏覽器打開這個網頁：
可以看到，所有的的顯示樣式，其中的如果要修改選中元素，則只要在div元素上增加或減少樣式selecteddiv即可達到切換選中元素的樣式。
編寫移動元素處理邏輯
然後來編寫JavaScript的代碼。
設置一個變量selectedid來存儲當前選中的元素id的值，默認為n1。
然後在dc函數中，通過this.id參數可以將不同的div元素的id傳遞到函數當中，這樣就不需要每個div都寫一個不同的函數了，使用同樣的一個函數，進行同樣的邏輯處理，同時也能知道是哪一個div的事件被觸發了。
get24.js代碼如下：
修改html文件，將所有測試的內容刪除，並設置body的onload事件和重新開始按鈕onclick事件為initPage函數，設置清除按鈕的事件為cleartype函數。
get24.html代碼如下：
刷新網頁：
可以看到默認第一個數字的邊框變成紅色了，表示此數字被選中，然後點擊第一種運算次序的第一個空白元素：
可以看到，原始的數字不見了，數字出現在第一種運算次序的第一個空白元素，表示數字被移動過來了。
此時數字被選中狀態也跟著移動了，此時如果點擊原始的第一個數字的空白元素：
可以看到，數字又被移動回去了。通過這樣的方式就可以移動數字。
此時，如果被選中元素是原始數字第1個，點擊原始數字第2個，就可以切換選中的焦點到第2個了。
也就是，假如選中一個元素，再去選第二個元素，假如第二個元素是空白則移動第一個元素的值到第二個元素，假如第二個元素不是空白有數值的話，就是移動選中的焦點。
有一種特殊情況要處理，假如焦點在某個元素上，此時點擊這個元素，則什麼事情也不需要做。
來看看如果是運算符該如何處理。
首先要明確數字和運算符是不同類的元素，互相之間不能移動內容。
然後運算符的移動和數字不同，因為數字是必須使用且只能使用一次，但是運算符卻是可以重複使用的。比如三個運算符都可以是加號。
因此，將運算符移動到空白運算符位置之後，原始的運算符內容仍然要保留。
如果要刪除已經設置的運算符，可以點擊原始運算符右側的清除按鈕，這樣做起來比較方便。
因此需要判斷如果是運算符元素，則清除按鈕才起作用。
首先選中一個運算符加號：
然後，點擊第一種運算次序的第一個運算符空白元素：
可以看到，空白運算符填好了加號，並且原來的加號還在，可以繼續將加號放到其它空白運算符種。
此時在運算符被選中的情況下，點擊清除按鈕，可以清除這個填好的運算符。
測試每一種運算次序，看看各種數字和各種運算符的移動是否正常。
增加隨機題目生成代碼
前面的處理都是針對網頁元素的控制。
接下來編寫JavaScript代碼，nextSubject函數隨機生成4個1到13之間的整數，然後題目數加1。
get24.js代碼修改如下：
get24.html代碼刪除掉測試的4個值：
刷新網頁：
可以看到生成了4個隨機數，多刷新網頁看看是否每次都生成的是不一樣的4個數字。
計算驗證結果
現在來編寫檢查按鈕的事件。
首先修改html代碼增加事件處理函數。檢查按鈕的事件。
get24.html代碼修改如下：
然後增加JavaScript函數，首先檢查5種運算次序，如果全部空白元素都填寫好了則進行計算，判斷是否等於24。
如果正確，則alert顯示正確，然後分數增加，然後調用下一題目函數。
如果錯誤，則alert顯示錯誤，然後分數不變，調用下一題目函數。
get24.js代碼修改如下：
刷新網頁，開始測試：
移動數字到相應位置：
移動運算符到相應位置：
然後點擊檢查按鈕：
顯示檢查結果是答案正確，點擊確定按鈕：
可以看到下一題了，並且分數加1了。
然後移動數字和運算符，故意結果不正確，點擊檢查按鈕：
看到顯示結果不正確，點擊確定按鈕：
可以看到下一題了，分數不變。
題目沒有答案怎麼辦
持續測試下去，會碰到一種情況，也就是說，給出的4個隨機數非常不巧，加減乘除怎麼計算也算不出24點，那麼這種情況怎麼辦呢？
有2種解決辦法，一種辦法是在生成4個隨機數之後就寫一個函數去計算能不能得到一個解法算出24，如果沒有解法，則重新生成另外4個隨機數，直到一定有解法，才顯示到界面上。
另外一種辦法是在頁面上增加一個按鈕，無答案，當用戶發現沒有解法時，點擊這個按鈕，此時程序去計算是否有解法，如果有解法則說明用戶回答錯誤，則顯示回答錯誤，不加分進入下一題，如果確實沒有解法，則說明用戶回答正確，則顯示回答正確，加分並進入下一題。
由於這裡學習的重點是如何使用JavaScript來控制網頁元素，這裡的求算24點解法的邏輯在第1章裡面有說明，這裡就不深入講解了。
大家可以作為課後練習將這塊內容自行完成。