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

# 4/16 線上 Slack 助教

## 今日輪班助教時間

暄雯：4/16（五）
早上 9:00 - 早上 11:00，下午 1:30 - 下午 5:30

## 發問規範

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

## 注意

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

## 問題

1. **穎旻：**
老師助教同學們好，這是我的 [Codepen](https://)，我原本預期「JS 第 8 行會出現數字 8」，但卻出現「預期外的結果是 0」，想問下問題出在哪裡？
> 助教回覆：
---
2. **LEEE：**
老師助教同學們好，這是我的 [CodePen](https://codepen.io/KAILIAO/pen/GRrdOae?editors=0011)，我原本預期「JS 第 130 行 orderSubmit() 送出預訂資料點擊只會送出 1 筆」，結果點太多下，1 筆購物車資料送了 3 筆出去。雖然有 3 筆，不過 ID 都不一樣，請問要怎麼預防一次送太多筆訂單呢?
> 助教回覆：
> 建議可以把 .then(res => {}) 內的程式碼移到 axios 外面執行，避免資料還未傳送完又繼續發送資料，修改範例如下：
>

axios.post(api, { data: { user } })
  .then(res => {})
  .catch(err => {
    console.log(err.response)
  });
orderInfoForm.reset();
cartsData = [];
renderCarts(cartsData);
getOrder();

---
3. **雅帆：**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/yafanchung/pen/rNjKyXK?editors=1011)，
助教不好意思~我有點搞不太清楚 4/8 每日任務的加入購物車和取得購物車的邏輯，以下問題有點多，要再麻煩解惑，謝謝 ><
1.我的理解是程式邏輯思維應該是:取得 API 的產品列表資料 > 渲染產品列表 > 當 user 點擊"加入購物車"的 btn > 取得 API 購物車的資料 > 渲染購物車資料 請問這樣邏輯對嗎？
因為 [助教把程式碼](https://codepen.io/znlcgmgk/pen/XWpadEB?editors=0011) 都整理過，將資料跟渲染分開來寫，我有點不知道在程式碼撰寫時該如何思考進行撰寫的順序?覺得我的思維有點混亂 @@
2.想請問 JS 第 32 行為什麼 console 出來有三筆資料，可是畫面上卻只有一筆資料？
3.JS 第 74 行為什麼要使用 querySelectorAll ? 我的想法是不能將全部產品資料跑 forEach 並在 forEach 裡面綁定 item 的一個按鈕嗎？
然後為什麼按鈕的 DOM 跟監聽事件要寫在 renderProductList 裡面才會有用？
4.我目前遇到的問題時 JS 96 行 console 沒有出現預期的購物車資料，想請問我是哪邊有寫錯嗎?
5.[助教的解答中](https://codepen.io/znlcgmgk/pen/XWpadEB?editors=0011)，JS 第 85 行 `console.log(2, error);` 的 2 是有甚麼用意嗎？
> 助教回覆：
> 1. 你的邏輯是正確的哦，要先取得資料才能夠進行渲染。但在撰寫可以將資料的取得寫在同一個區塊、渲染則整理在另一區，這樣日後檢視程式碼時會比較容易
> 另外，因為會希望使用者進來網頁時可以看到之前尚未送出訂單的購物車資料，所以一開始也會執行「渲染購物車資料」的函式
> 2. 取得資料後要記得把他渲染出來哦，這邊需要執行 renderCart(cartData) 才可以把三筆資料都渲染出來哩
> 3. 因為每個「加入購物車」按鈕的 class 名稱都是 .addCart，因此要使用 querySelectorAll 才能選取到所有的按鈕。
> 這邊不太確定同學想要執行的方法實際上會如何撰寫，因為目前產品的資料（cartData）裡沒有包含按鈕的設定。不過除了 querySelectorAll，也有其他種可以執行「加入購物車」按鈕的方法，可能要麻煩同學試著把自己的想法描述清楚一點、或是嘗試寫出來，這樣我們會比較容易檢視哩，謝謝～
> 將按鈕的 DOM 跟監聽事件寫在 renderProductList 是因為一開始還沒有取得資料、渲染時，畫面上是沒有 .addCart 按鈕的，因此 addCartBtn 無法取得值、沒辦法監聽事件，所以會把他們寫在渲染產品列表資料的函式裡。
> 4. 加入購物車的 api 最後為 carts，不是 products，修改成下面這樣就可以了：
> `https://hexschoollivejs.herokuapp.com/api/livejs/v1/customer/${api_path}/carts`
> 5. console.log 使用數字的原因是在檢視時比較容易辨識是哪一個訊息，主要用來區分哩

---
4. **John G：**
老師助教同學們好 這是我看範例 codepen 所遇到的問題
這個範例驗證插件機制是不是只是使用 change 到 input 時才會觸發，而觸發也就只是出現錯誤提醒而已不會阻止表單送出
也就是你可以直接點選送出表單的按鈕，這樣不是會有很大的問題嗎？
https://codepen.io/john-chen-the-flexboxer/pen/NWdzBBJ?editors=1010
> 助教回覆：
>目前的程式碼是這樣沒錯～這邊同學可以嘗試將表單送出與表單驗證的功能結合，例如：點擊按鈕時先確認是否有錯誤訊息，如果有錯誤訊息，則不執行送出表單
---
5. **KaiHuang：**
老師助教同學們好～
4/6 日的每日任務，不曉得為何版面第一張正常，第二張開始會跑版
是我哪邊 link 或 script 引入有錯誤嗎？？
這是我的 CodePen：
https://codepen.io/kaihuang3013/pen/oNBErpP
> 助教回覆：
> 同學可以試著修改用來渲染的字串結構，目前的結構使用到了 4 個 `div`，但只有 1 個結尾的 `</div>`，把其他結尾補上就不會跑版了～
---
6. **youting：**
老師助教好，這是我的 [CODEPEN](https://codepen.io/youtinglou/pen/ZELaqEG)，我已經寫過驗證了，如果一個 input 通過驗證就顯示驗證通過，但我想在每個 Input 都通過驗證後，`validate` 這個變數變成 `true`，並且最後函式回傳值為 `true` ，但 `validate` 沒有照我預期的在 **13 行** 變為 `true`，我該如何改寫，第 **20 行**的 console 也沒有執行，不知道是哪邊出錯了
> 助教回覆：
> 這邊一開始檢視 console.log 有看到 true，所以第 20 行是有執行的～
> 目前在 input 設定的監聽函式是 blur，如果離開焦點就會執行裡面的程式碼。助教測試後，如果那個欄位有填寫資料就會執行第 16 行的程式碼，顯示「驗證通過」哩。
> 如果同學想要在「每個」input 都有正確填寫才顯示驗證通過，建議可以增加「送出訂單」按鈕的監聽，點擊按鈕後檢視是否資料都有填寫，如果都有填寫再顯示驗證通過
---
7. **Vivian Yeh：**
老師助教同學們好，這是 [4/9 的每日任務助教的範例 code](https://codepen.io/znlcgmgk/pen/xxgLRQM?editors=0011)，
我原本預期「JS 第 146 行 DOM 會出現 `querySelectorAll(“input[type=‘text’],input[type=‘tel’]“)」`，但卻出現「`(“input[type=text],input[type=tel]“)`」，attribute = value 的 value 部分並沒有加上引號想請問為什麼呢（附上昨天助教的 [解答](https://www.w3schools.com/cssref/sel_attribute_value.asp)），這邊的 value 難道沒有型別上的問題嗎？
我試過兩種方法，有加沒加都取的到⋯⋯只是有點好奇為什麼沒加引號也可以取的到 QQ
> 助教回覆：
> 因為它取到的值為 DOM，這邊可以將 attribute = value 看作 HTML 元素的選擇，它適用的是 HTML 的規則而不是 JS 的，因此不會有資料型別的問題。所以有沒有加引號都是可以取到值的～
---
8. **KaiHuang：**
老師助教同學們好，這是我的 CodePen：
https://codepen.io/kaihuang3013/pen/xxgzaVP?editors=1011
程式碼最後面 btn 事件監聽，預期點擊按鈕會有 console.log 輸出，但卻都沒有反應
麻煩助教了，謝謝您
> 助教回覆：
> 因為一開始畫面上並沒有 .btn 的 DOM，是經過渲染後才出現的，因此宣告 btn 為變數時，btn 並沒有取到任何的 DOM。因此事件監聽才會沒有反應。
> 可以嘗試改為宣告一開始畫面就存在的 DOM 為變數，例如 .productList，再用範圍取值的方式，來確認點擊的目標是否正確，如果正確就可以執行想要的程式。
> 範圍取值可以參考教學影片內容：[範圍內容取值](https://courses.hexschool.com/courses/1289881/lectures/31463151)
---
9. **sue：**
老師助教同學們好，這是我的第五關作業 GithubPage：https://github.com/athomec/homework_JS/blob/main/all.js
想請問 137 行已經加了 return 為何程式碼還會繼續往下執行？
另外想問 js 是否能夠經由屬性值來選取 DOM 呢？(類似 jQuery 的 $('元素[屬性名=屬性值]'))
以上，謝謝！
> 助教回覆：
> 因為 forEach 沒辦法使用 return 來中止函式，所以程式碼會繼續執行。從 [MDN 文件說明](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) 可以得知沒有中止 forEach 迴圈的方法。
> 原生的 JS 沒有這個方法哦，同學可以嘗試載入 jQuery 再透過屬性值來選取 DOM 哩
---
10. **林楹鈞：**
老師助教同學們好，這是我的 作業連結 / 作業檔案，
我對於計算時間（時間總合平均）、排名方法沒辦法理解清楚，目前網頁上 打 Ｘ 的位置是我希望用 JS 能渲染在畫面上的資料，但卡關了。
再請助教解答！ 謝謝！
> 助教回覆：
> 建議同學之後詢問問題時，可以將程式碼放到 CodePen～這樣我們會比較好檢視哩，謝謝 :D
> 計算時間可以嘗試將每筆資料的分鐘數轉換成秒數後，跟秒數相加，就會得到時間總和。這邊可以透過 sort 來根據時間進行排序。
> 計算小組總和平均也是先將各組同學的時間轉換成秒數後做加總，之後再除以各組的人數哩。
> 排名的方法這邊同學是對 sort 的使用方法比較不理解嗎？如果是 sort 的使用方法，可以參考 [4/2 線上 Slack 助教](https://hackmd.io/aFO3rNlxTVGTzo5meokVIg) 第 3 位同學的問題回覆，有解說 sort 的運作方式。
> 可以試著理解看看～
---
11. **Hsin：**
老師同學們助教好~ 這是我的 [codepen](https://codepen.io/hsinhui/pen/dyNZKjq?editors=1010)，想請問為什麼我在 HTML 的 thead 分別設定 th 的寬度，但似乎都沒有按照我設定的比例跑出來，不知道問題出在哪，再請助教幫忙看看，感謝!
> 助教回覆：
> 如果直接在 HTML 標籤上寫樣式，需要加上 style 哦，這樣才能套用到樣式。範例如下：
> `<th style="width:10%">訂單編號</th>`
> 除了 thead th 的樣式要設定外，tbody th 的樣式也要設定哩。另外，因為同學使用的是 % 來設定，建議也要再使用 max-width 和 px 設定一個寬度（例如：max-width: 200px）來給予它比例的依據。
> 可以試著調整看看～

> *****12.程翔*****
> 老師同學們助教好 這是我的CODEPEN https://codepen.io/xxxiang/pen/KKaBEYL?editors=0010
> 原本預期訂單狀態可以順利更改 但是只能把未處理改成以處理
> 沒辦法把以處理改成未處理 程式寫法也參照老師的步驟 只是命名方式有點不同 煩請助教可以幫我除錯嗎@@