---
tags: JS 直播班 - 2021 春季班
---

# 4/21 線上 Slack 助教

## 今日輪班助教時間

至榮：4/21（三）
早上 9:00 - 下午 5:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. **穎旻：**
老師助教同學們好，這是我的 [Codepen](https://)，我原本預期「JS 第 8 行會出現數字 8」，但卻出現「預期外的結果是 0」，想問下問題出在哪裡？
> 助教回覆：

---

（這裡只能由助教自行增加問題，請大家將問題放在 thread 上）

1. **yu0917**
老師助教同學好～
想請問第八週作業 [前台範例程式碼](https://codepen.io/znlcgmgk/pen/RwKKBbM?editors=1000) 的「加入購物車按鈕」，每個 id 都是 「addCardBtn」 。想詢問 id 是否可以重複使用？還是是因為每個產品的「加入購物車按鈕功能」相同，所以可以是同個 id?

> 助教回覆： 同學問得很好喔，這邊已經有把 id="addCardBtn" 修正為 class="addCardBtn"。相同名稱的 id 建議只能用一個，如果需要重複使用則建議用 class。

2. 老師助教同學們好，關於最終作業我想請問兩個問題:
* 這是我的 [後台 CodePen](https://codepen.io/yafanchung/pen/WNRaeXG?editors=1010)
想請問在 JS 136行是 item.paid==true 可是在 JS 196行是 status == "true"，我有點搞不太清楚這兩者的差別，我目前認知是 item.paid 取出來的值不是都會是字串嗎? 可是我有嘗試把 JS 136行改成 item.paid== "true" 程式就不能 work，想請問我是哪邊觀念有誤?
* 這是我的 [前台 CodePen](https://codepen.io/yafanchung/pen/ExZeVox?editors=1010)
這邊想請問一個觀念，在做作業中有想到一個點，
如果是刪除購物車的資料，直接使用刪除購物車的資料的 API 和 delete 方法，可是如果像之前練習還沒有 API 的話，假設資料集是一個 data 的陣列，這樣如果要刪除好像會用陣列方法 splice,我是不是可以當成，因為 api 是後端寫好的程式，所以直接套用即可，但如果今天沒有 api 我就要自己處理資料，就會是用陣列方法去操作，請問我這樣解讀對嗎?
謝謝!

> 助教回覆:
> 1. 同學可以在 JS 第 123 行加上 console.log("paid 型別", typeof(orderData[0].paid)); 可以發現 response 回傳的 paid 屬性是布林值; 接著可以在 JS 第 186 行加上 console.log(status, typeof(status))，可以發現從 dataset 取回的值會是字串。如果不確定回傳的是什麼型別，建議都可以先用 typeof() 檢查一下再做使用。
>
> 2. 同學的理解是對的喔，最終作業「刪除購物車」的資料處理已經在後端做好了，所以前端不需要自己動手。一般而言會用陣列儲存購物車資料，所以用陣列方法去操作也是正確的。

3. 老師助教同學們好，這是我的codepen https://codepen.io/angel011103/pen/YzNJqRo?editors=0011
不懂的地方是js38行，老師講到時間戳要乘上1000的部分，不是很明白乘1000前是1970的時間，那為什麼乘1000後會變成現在的時間，覺得值應該是1970的“毫秒“時間才對？:thinking_face:

> 助教回覆:
timestamp 之所以要 * 1000 是因為 JS 使用的單位是毫秒，而 API 回傳的 createdAt 是 UNIX timestamps 的格式，單位是秒。
>
> 所以如果要正確顯示日期，一定要進行單位轉換才可以 (日期的計算是從（UTC）1970 年 1 月 1 日開始)。 假設後端今天傳來的 createdAt 是 1000 (秒)，如果沒有進行單位轉換，帶入 new Date() JS 會認為是從 1970 年 1 月 1 日開始加上 1000 (毫秒)

4. ** Cena **
老師 助教同學好
這是我的codepen https://codepen.io/hgdnkzkg/pen/JjEmVXG
我的問題是 我想要增加可以修改數量到畫面上
在codepen 143 行 不知道為什麼沒有渲染 謝謝

> 助教回覆: JS 第 147 行應該改成 let numId = e.target.dataset.numid; 這樣就可以修改了。另外要注意 data-* 只能用小寫喔。

5. **moitw**
老師助教好，想問表單驗證的問題，這是我的 [codepen](https://codepen.io/tsuifei/pen/bGgxWOq?editors=1010)
驗證機制是使用valideteJS 條件是在第296行，拿到輸入值時，使用.trim() 去空白，電話那欄有使用length: { minimum: 8, }看是似乎不起作用，且即使有錯誤訊息，表單還是寄出去了，找半天找不出原因，是有哪裡寫錯嗎？
謝謝～

> 助教回覆: 這邊測試 trim() 與 minimum 的運行是正常的喔，助教這邊發現你 JS 第 301 行少加了一個 `input[type=tel]`，所以電話欄位的文字清除會有問題。

6. **ZengZeng**
老師助教同學們好，這是我的chrome瀏覽器->開發人員工具->console 截圖，不知道為什麼會出現黃底的報錯文字，但all.css是有順利載入的！想問下問題出在哪裡？:thinking_face: 謝謝！


> 助教回覆: 這邊是因為助教撰寫版型的時候是用 SCSS 撰寫的，會透過一個 .map 檔去對應 CSS 檔案及 SCSS 檔。在 all.css 的第 836 行可以發現一行註解 `/*# sourceMappingURL=all.css.map */` 當瀏覽器讀取到這行，就會尋找對應的 map 檔，不過因為給同學的範例只有 CSS 而已，所以 Chrome 會回報找不到 app.css.map 這支檔案。這不影響程式碼的運作，同學可以忽略它，或是移除 `/*# sourceMappingURL=all.css.map */` 這行註解，就不會發出 warning 了。

參考: https://ithelp.ithome.com.tw/articles/10159158

7. **carol liao**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/yaxuan/pen/zYNmXVN?editors=1010)，想請問 175 行到 178 行，是怎麼把顏色帶到 dataColor 的呢

> 助教回覆: 首先如果訂單的種類有超過 3 種， c3DataTitle 的內容是會是「數量排名前三之項目的 "名稱" + "其他"」，總共 4 筆，數量會跟 colorCode 的陣列長度相同。接著透過 forEach 將 "名稱" 作為屬性、"色碼" 作為值加入 dataColor 中。 dataColor 一開始為空物件， c3DataTitle.forEach 的運作流程如下:
>
> 假設 c3DataTitle = ["Charles 雙人床架","Antony 雙人床架／雙人加大","Antony 床邊桌","其他"]
> 跑第 1 次: item = "Charles 雙人床架"， i = 0
> 因為 dataColor["Charles 雙人床架"] 不存在，所以會新增一個屬性，其值帶入 colorCode[0]，為 "#301E5F" (dataColor[item] = colorCode[i];)
>
> 其他第 2,3,4 以此類推，就是透過這樣的流程把顏色帶到 dataColor 的。