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

# 4/14 線上 Slack 助教

## 今日輪班助教時間

至榮：4/14（三）
早上 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. **Carrie**
老師助教同學們好，這是我的 [CodePen](https://codepen.io/echocarriet/pen/LYxmVyG?editors=1011)
我使用 validate.js 套件，原本預期「 填寫欄位錯誤時，有設定兩階段表單檢查的欄位，驗證錯誤會出現兩次的錯誤訊息 」，卻只出現「 一次的錯誤訊息提示 」。
以圖片網址為例，在第 114 ~ 120 行除了必填欄位外，還另外設定需要式 http 與 https 格式，如未填寫正確會再次顯示 " 請填寫正確網址 "。
但頁面上只會顯次第一次 presence: { message: '為必填欄位' } 的錯誤訊息。
不知道哪邊觀念出了問題，再麻煩給予指引，謝謝助教 !

> 助教回覆: 作業中 JS 第 173 行撰寫有誤，同學可以分別在前後使用 `console.log(item.parentNode.nextElementSibling);` 觀察。舉例來說，如果我修改了「圖片網址」此一欄位，item.parentNode.nextElementSibling 取得的會是

<div class="alert-message">
  <p id="ticketImgUrl-message" data-message="圖片網址">
    <!-- <i class="fas fa-exclamation-circle"></i><span>必填!</span> -->
  </p>
</div>

> 這整個 HTML 標籤。這時如果使用 `item.parentNode.nextElementSibling.textContent = '';`
> 這個 HTML 標籤會被設定成 `<div class="alert-message"></div>`，內部的 HTML 都會被清空，這樣會導致之後無法再取得 `<p id="ticketImgUrl-message" data-message="圖片網址"></p>` 標籤，所以錯誤訊息提示只會出現一次。
>
> 另外，同學的程式碼目前的「送出驗證」並不完整，可以連續送出空白表單，如圖:


> 可以參考 4/9 號的每日任務解答，助教有提供完整的驗證程式碼。
> https://rpg.hexschool.com/training/17/show?embedhm=_7BnBKSLSHeiucGt6NJKUQ

2. **smallg1015**
老師助教同學們好，這是我的 [CodePen](https://codepen.io/hwgnmpua/pen/xxgYmBx?editors=1011) ，我原本預期「JS 第 232-246 清除購物車所有內容,當購物車已經沒有內容時,會進入response.data.status == false,並顯示response.data.massage的訊息」，但執行後卻「會直接進入error內,且error內也沒有status及message等屬性」，不知道自己哪裡觀念有問題,再麻煩大家了,謝謝！

> 助教回覆:
首先建議同學在觸發各個按鈕的時候都加上 e.preventDefault(); 避免網頁亂跳。
關於同學的問題，這邊是因為當購物車已經沒有內容時，點擊「刪除所有品項」後端伺服器的處理會是 error， axios 會以 catch() 函式來處理，不會執行 then() 函式，因此就不會觸發你預想的那個 else 判斷了。

3. **Harvey**
老師助教同學好,這是我的 [codepen](https://codepen.io/lqigzkgx/pen/ZELoOeQ?editors=0011),我原本預期JS第101行的效果是可以在我按下新增套票按鈕後把有正確輸入欄位的測試文字清空,可是沒有效果,想請教觀念哪裡錯了!

> 助教回覆:
> 因為 document.querySelectorAll('.message') 會取回「所有」帶有 .message 的 HTML 標籤，因此需要用陣列方法 forEach 各自為它們設定 textContent = "" 才會是正確的。

4. **Hua**
* 助教好 我想請問一下
為什麼我在刪除購物車商品的時候
不論用清空或刪除單筆 只要購物車剩下一筆商品的時候 按刪除會刪除成功 但無法把資料渲染成空白的（被刪掉的東西還在畫面上
但只要兩筆資料以上 用刪除單筆就可以成功渲染剩下的商品（兩筆刪除其中一筆 可以成功顯示剩下一筆）這是我的code pen 找好久了還是不知道哪裡出了問題
https://codepen.io/mjyxjfcz/pen/zYNjzMz

> 助教回覆:
> 這邊需要將 JS 第 85 行的 const table 移除「const」，並在 cartList.forEach 之前先用 let 宣告 table; 接著將 JS 第 110 行 的 `cartTable.innerHTML = table;` 移至 cartList.forEach 之後。
>
> 邏輯是這樣: 按照原先的寫法，因為你將 cartTable.innerHTML = table; 放在 cartList.forEach 內部，所以只有當 cartList 存有內容的時候才會觸發 forEach、才會觸發渲染 innerHTML。但是當你刪除最後一筆資料的時候，cartList 內已經沒有內容了，所以不會觸發重新渲染，畫面因此會保持原有的狀態。 至於 table 需要改成 let 是因為正常用 const 宣告的變數是不能重新指派值的。