選取與送出動作-使用JavaScript
先參考月曆相關的程式碼
1．勾選符號的處理
勾選功能，加入addCheckMark函式：
function addCheckMark(color_name){
currentColor.name = color_name; //將勾選的色彩名稱color_name指定給全域變數currentColorName，以便在changeColor方法裏使用，來設定整個主題的色彩。
var checkmarks = document.getElementsByClassName("checkmark");
for(var i = 0; i < checkmarks.length; i++){
checkmarks[i].parentNode.removeChild(checkmarks[i]);
}
var colorPreviews = document.getElementsByClassName("color-preview");
for (var i = 0; i < colorPreviews.length; i++){
if (colorPreviews[i].id == color_name) {
console.log(colorPreviews[i].id + "," + color_name + "," + currentColor.name)
colorPreviews[i].innerHTML = "<i class='fas fa-check checkmark'></i>";
}
}
}
2．處理文字方塊的資料
function submitPostIt(){ //按了PostIt按鍵後，所要執行的方法
const value = document.getElementById("edit-post-it").value;
document.getElementById("edit-post-it").value = "";
let num = getRandom(1, 6); //取得1~6的亂數，用來標示便利貼顏色的檔案代號
let postIt = {
id: currentPostItID,
note_num: num,
note: value
}
if(newCurrentPostIt){ //如果是新記事的話
postIts.push(postIt); //將新記事postIT物件推入postIts陣列
} else {
postIts[currentPostItIndex].note = postIt.note; //更新現有記事物件的記事資料
}
console.log(postIts)
fillInMonth(); //這個方法可以改成fillInCalendar比較貼切，之後，我們再來統一大改 (refactoring)
closeMakeNote();
}
這個階段，我們要能夠取得二個資料，選取食物名稱與學號輸入資料。
勾選功能，加入addCheckMark函式：
<script type="text/javascript">
function addCheckMark(foodOption){
//清除/移除類別有"checkmark"的元素，也就是清除掉勾選的顯示
var checkmarks = document.getElementsByClassName("checkmark");
for(let i = 0; i < checkmarks.length; i++){
checkmarks[i].parentNode.removeChild(checkmarks[i]);
}
//加上勾選的顯示
var foodOptions = document.getElementsByClassName("food-checkmark");
for (let i = 0; i < foodOptions.length; i++){
if (foodOptions[i].id == foodOption) {
foodOptions[i].innerHTML = "<i class='fas fa-check checkmark'></i>";
}
}
}
</script>
送出功能，加入submit_order函式：
function submit_order(){
const order_people = document.getElementById("order").value;
if (order_people == "") {
alert(" 學號/姓名不能是空白！！！");
return;
}
console.log(order_people + "," + food_choice);
}
完整程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>富國快餐</title>
<link rel="stylesheet" href="css/modal.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<style>
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
body {
background-image:url('images/backimg.jpg');
background-repeat:no-repeat;
background-color:Black;
margin : 0;
font-family: 'cwtexkai', sans-serif;
font-weight : 800;
}
</style>
<body>
<dialog id="modal" open>
<div id="fav-food" open>
<div class="popup">
<h4 class="center">訂便當-富國快餐</h4>
<div id="food-options">
<div class="food-option">
<div><img src="images/food-1.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>酥炸雞腿</h5>
<div class="food-checkmark" id="酥炸雞腿" style="background-color: #1B19CD;" onclick="addCheckMark('酥炸雞腿')"><i class="fas fa-check checkmark"></i></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-2.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>蜜汁雞腿</h5>
<div class="food-checkmark" id="蜜汁雞腿" style="background-color: #D01212;" onclick="addCheckMark('蜜汁雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-3.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>醬燒雞腿</h5>
<div class="food-checkmark" id="醬燒雞腿" style="background-color: #721D89;" onclick="addCheckMark('醬燒雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-4.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>爌肉</h5>
<div class="food-checkmark" id="爌肉" style="background-color: #158348;" onclick="addCheckMark('爌肉')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-1.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>主廚雞腿</h5>
<div class="food-checkmark" id="主廚雞腿" style="background-color: #1B19CD;" onclick="addCheckMark('主廚雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-2.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>招牌雞腿</h5>
<div class="food-checkmark" id="招牌雞腿" style="background-color: #D01212;" onclick="addCheckMark('招牌雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-3.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>獨門雞腿</h5>
<div class="food-checkmark" id="獨門雞腿" style="background-color: #721D89;" onclick="addCheckMark('獨門雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-4.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>石板烤肉</h5>
<div class="food-checkmark" id="石板烤肉" style="background-color: #158348;" onclick="addCheckMark('石板烤肉')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-1.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>不二雞腿</h5>
<div class="food-checkmark" id="不二雞腿" style="background-color: #1B19CD;" onclick="addCheckMark('不二雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-2.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>三寶便當</h5>
<div class="food-checkmark" id="三寶便當" style="background-color: #D01212;" onclick="addCheckMark('三寶便當')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-3.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>烤鴨便當</h5>
<div class="food-checkmark" id="烤鴨便當" style="background-color: #721D89;" onclick="addCheckMark('烤鴨便當')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-4.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>無雙爌肉</h5>
<div class="food-checkmark" id="無雙爌肉" style="background-color: #158348;" onclick="addCheckMark('無雙爌肉')"></div>
</div>
</div>
</div>
<div class="submit-box">
<h5>學號(或姓名)：</h5>
<textarea id="order" class="font" name="order" autofocus></textarea>
<div><button id="update-theme-button" class="button font" onclick="submit_order();">送 出</button></div>
</div>
</div>
</div>
</dialog>
<script type="text/javascript">
function submit_order(){
const order_people = document.getElementById("order").value;
if (order_people == "") {
alert(" 學號/姓名不能是空白！！！");
return;
}
console.log(order_people + "," + food_choice);
}
var food_choice = '酥炸雞腿';
function addCheckMark(food){
food_choice = food;
// console.log(food_choice);
//清除/移除類別有"checkmark"的元素，也就是清除掉勾選的顯示
var checkmarks = document.getElementsByClassName("checkmark");
for(let i = 0; i < checkmarks.length; i++){
checkmarks[i].parentNode.removeChild(checkmarks[i]);
}
//加上勾選的顯示
var foodOptions = document.getElementsByClassName("food-checkmark");
for (let i = 0; i < foodOptions.length; i++){
if (foodOptions[i].id == food) {
foodOptions[i].innerHTML = "<i class='fas fa-check checkmark'></i>";
}
}
}
</script>
</body>
</html>