---
tags: JS 直播班 - 2021 春季班
---
# 4/15 線上 Slack 助教
## 今日輪班助教時間
佩涵：4/15（四）
早上 9:00 - 早上 11:00，下午 1:00 -下午 5:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
1. **穎旻：**
老師助教同學們好，這是我的 [Codepen](https://)，我原本預期「JS 第 8 行會出現數字 8」，但卻出現「預期外的結果是 0」，想問下問題出在哪裡？
> 助教回覆：
---
2. **Fred Chang：**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/fred8196/pen/bGgLjMV)，想請問如果把JS的174-188行先註解，然後打開191-200和203-214行時，為什麼會無法成功建立訂單，謝謝!
> 助教回覆：
> 因為 POST 這邊的 orderData 外層多包了一個大括號唷
```javascript
"data": {
orderData
}
```
> 要改成
```javascript
"data": orderData
```
> 這樣就可以成功送出訂單資料哩～
---
3. **Jordan_Tseng：**
老師助教同學好，這是我的[code](https://codepen.io/jordan-ttc-design/pen/gOgzJJo?editors=1011)，我是想問4/12的題目，我寫完看看同學們的寫法，大部分好像都會把productData.forEach放在判斷是否為全部外面，我是先判斷完才去forEach，如果是全部就可以減少回圈運作？雖然在這個範例應該沒啥影響。是想問這樣會不會比較好。
> 助教回覆：
> 你的做法跟觀念都沒有問題唷，先過濾掉全部再跑迴圈的方式確實是比較好的～～
---
4. **Carrie：**
老師助教同學們好，這是我的 [CodePen](https://codepen.io/echocarriet/pen/oNBygeQ)
原本預期 「 驗證失敗欄位出現錯誤訊息提示，如果再次輸入成功會清除錯誤訊息 」，所以在 212 ~ 214 行使用選取節點的方式，console 查詢到只有選到 `<div class="alert-message"></div>`，試了幾個在 `item.parentNode.nextElementSibling.子節點` 於後方加入子節點方式，都無法選取到它的子層 `<p id="ticketName-message" data-message="xxx">`。
再麻煩助教解惑了，謝謝 !
> 助教回覆：
這邊助教測試用 `.firstElementChild` 的方式取子節點是有成功的，同學可以試看看唷～
---
5. **WuJungHan：**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/JungHanWu/pen/OJWEVWp?editors=0011)，
我原本預期「按照助教直播分享的方法,JS 第 175 行到246行的表單驗證套件Validate.js應該會正常顯示如圖1」，但卻出現「錯誤 如圖二 並且也無正常顯示提示文」，想請問助教問題出在哪裡？謝謝助教
> 助教回覆：
> Object.keys(errors) 回傳的會是 errors 的 key 值（比如："套票名稱"、"圖片網址"…等）
>
> 但是
> ```javascript
> document.querySelector(`.${keys}`).textContent = errors[keys]
> ```
> 卻會找不到 class 名稱為套票名稱、圖片網址…等等的 DOM 元素
>
> 助教發現同學的 HTML 結構，每個欄位區塊中放錯誤訊息地方有寫兩處，這邊都會提出修改方式給你參考（以套票名稱為例）
1.
```html
<div class="messages name"></div>
```
把這邊的 name 改成「套票名稱」，這樣驗證錯誤後就會跑出提示文字了（不過 class 不建議用中文命名，所以助教比較偏向使用第二種方式）
2.
```html
<p id="ticketName-message" data-message="套票名稱"></p>
```
把選取對象 `.${keys}` 改成 `[data-message=${keys}]`，就也可以正常出現提示文字了
---
6. **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部分並沒有加上引號想請問為什麼呢？
> 助教回覆：
> 這個算是訂定好的規則哦。其實不管有沒有加引號，只要有取到 DOM 的話就不是錯的～
> 也可以參考[這篇文件](https://www.w3schools.com/cssref/sel_attribute_value.asp)（js 選取器跟 CSS 選取器很類似）
---
7. **Harvey：**
老師助教同學們好,這是[4/6的每日任務解答](https://codepen.io/lqigzkgx/pen/eYgKdNv),想請問為何要把api網址拆成1,2行然後在第7行重組呢?跟直接帶入整串網址(如第4行)的差別在哪裡呢?
> 助教回覆：
主要是為了方便管理、可以簡化程式碼哦，如果同學有開始做最終作業的話可以發現每支 API 網址都有包含 https://hexschoollivejs.herokuapp.com 跟你的 API 路徑名稱，先把相同的部分拆出來，就不用再多撰寫重複的程式碼哩
---
8. **Valerie：**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/vicky-chang/pen/rNjpdzJ?editors=0010)，
我原本預期「JS 第 150 行能夠執行驗證」，但卻出現「Not Found」，想問問題出在哪裡？謝謝
> 助教回覆：
> 1. 因為沒有 .deleteAllItem 這顆清空購物車的按鈕，所以程式運行到 112 行的時候就會報錯，不會再繼續執行下面的程式碼，因此底下表單驗證的函式就不會被觸發到，也就無法阻止 submit 按鈕提交表單的預設行為。
>
> 所以「清空購物車」的功能若還沒做出來的話可以先暫時註解起來，或是擺放到最後面，不要影響到驗證這一塊～
>2. 同學沒載入到 validate.js 的 CDN 唷，要記得加上哩
>
>```html
><script src="https://cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
>```
---
9. **yu0917：**
老師助教同學好，我想詢問關於影音課程的「計算機網路總結」章節裡的「共筆文件」中。「瀏覽器解析過程」的連結進去是404，不知道有沒有其他連結，謝謝您～
> 助教回覆：
> 有跟助教長及老師確認了一下，應該是這篇被 Google 拿掉了 :shocked_face_with_exploding_head:
>
> 這邊提供其他連結給你參考 ↓
> - 這一頁是別的網站翻譯轉存的，但內容和原始連結是相同：[文件連結](https://www.html.cn/doc/chrome-devtools/network-performance/understanding-resource-timing/)
> - 這篇是新的相似頁（但內容已有些不同）：[文件連結](https://developer.chrome.com/docs/devtools/network/reference/)
>
> 也有請老師同步更新連結了，感謝同學的提出～
---
10. **WuJungHan：**
老師助教同學們好，這是我的 Codepen，
我原本預期「html的13行可以與js的230~246顯示表單驗證文字在input下方,且能在輸入文字的時後驗證文字變空字串消失 圖如1」，但卻出現「但由於.addTicket-input有下flex導致驗證文字會在右邊顯示跑版,如圖二,js應該如何改成抓取html的15,16行來顯示驗證文字,而不是下個元素呢?如果不用js235行的item.nextElementSibling語法,應該如何修改呢?」，再麻煩助教解惑,謝謝!
> 助教回覆：
> 第 235 行也可以改用以下方式選取指定的 DOM 元素～
> ```javascript
> document.querySelector(`[data-message=${item.name}]`).textContent = '';
> ```
> 修改完後，要記得把 HTML 內所有 `<div class="messages" data-message="..."></div>` 的結構都移除喔
---
（這裡只能由助教自行增加問題，請大家將問題放在 thread 上）
Sign in with Wallet
Connect another wallet