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

# 3/22 線上 Slack 助教

## 今日輪班助教時間

佩涵：3/22（一）
早上 9:00 - 早上 11:00，下午 1:00 -下午 5:00

## 發問規範

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

## 注意

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

## 問題

1. OopsJoy：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/oopsjoy/pen/yLVmxYj)，
我原本預期「載入時會顯示所有套票卡片資料」，但卻出現「0筆套票卡片資料(但使用篩選器點選"全部地區"是會出現所有套票卡面資料的)」，想問下問題出在哪裡？

> 助教回覆：
> 第 14 - 47 行需包在 response 的函式裡。因為 axios 還沒回傳資料，所以頁面載入時會讀取不到。

---

2. Hsin：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/hsinhui/pen/RwoXdQz?editors=1011)，
在第21行的地方，我照著老師說的等資料回傳後清空表格資料，但不知道為何form.reset()跟賦予空字串都沒有效果，請助教解惑~感謝

> 助教回覆：
> accountValue = ""、passwordValue = "" 是清空變數的值，並不會影響到 DOM 元素的 value 屬性，所以要改成
> ```javascript
> account.value = "";
> password.value = "";
> ```
> 而 form.reset() 沒有效是因為找不到 form 變數，要記得加上下方這行程式碼來選取 <form> 元素（並指派給變數 form）
`const form = document.querySelector("form");`

---

3. 雅帆：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/yafanchung/pen/jOVJZXY?editors=0011)
關於問題五:所有區里長人數都整理在一個物件裡 這題我有問題，以下為我的問題點，再麻煩助教解惑，謝謝!
- 問題五: 我的 console.log 有錯誤訊息，看了下同學寫法，似乎要改成 [item["區別"]] 我有點不太理解這段程式取直的意思，是否能請助教解釋一下~><
- 問題五: 當 undefined 的時候初始值為何是 1 不是 0?
- 根據題意，total 的物件是否也要設定在 kaohsiung 物件下的一個物件?還是算是一個新的物件?

> 助教回覆：
> 1. 因為 item ['區別'] 取出來是中文字
可把 total[item['區別']] 看成 item['區別'] -> 取到「鹽埕區」等等的區， total['鹽埕區'] -> 取到數字（值）
而使用點記號是沒辦法對中文屬性來取值的～
> 2. 回傳 undefined 代表 total 物件還沒有那個地區的資料，所以說要給他初始值 1，之後出現第 2 次、第 3 次.... 就會跑 else 的程式碼繼續累加 ++ 上去，這樣的總人數才會是正確的（若賦予他 0 則總次數永遠都會少 1）
> 3. 是一個新物件

---

4. 雅帆：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/yafanchung/pen/RwKbWdb?editors=0011)
關於本日的每日任務想請教一下，撈回 api 的資料，陣列名稱一定是 data 嗎?因為自己自定義好像會有錯，有點不太懂這個 data 名稱哪裡來的?

> 助教回覆：
data 是回傳的 response 物件的其中一項屬性唷，名稱不能隨意更動。

---

5. Lita：
老師助教同學們好，這是我的 Codepen：https://codepen.io/lita030/pen/eYBwzab，
我跟著助教分享的lv3學習有些不懂的地方，預期「47-84行執行新增資料與清除表格內容」，但卻沒有效果，想問下問題出在哪裡？
另外不懂為何有('.ticketCard-area')與('#ticketName')這兩種寫法，謝謝:pray:

> 助教回覆：
> 1. 無法清除表格內容是因為 form 是沒被宣告的變數，要補下方的程式碼來選取 <form> 元素（並指派給變數 form）
`const form = document.querySelector("form");`
小提醒：第 40 行的 ticketREgion 需改成 ticketR**e**gion，price、group、description 對應的 id 名要記得修改正確的，rate 元素你也沒有選取到～
> 2. `.` 是選取 class 名稱的元素
`#` 則是選取 id 名的元素
若想直接選取 HTML 標籤元素則前面都不用加任何符號（像是上方的 form）

---

6. Harvey：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/lqigzkgx/pen/rNjBeRM) ,我希望做到的是table不要滿版的寬,可是把CSS裡第8行的註解打開後,會變成JS裡18~25行的width屬性沒有效果,想請問問題出在哪裡?

> 助教回覆：
> （助教這邊將註解打開發現畫面呈現都是一樣的 ><）
> 因為一連串英文不會自動換行，可以嘗試在 table 加上 `word-break: break-all;` 強制讓文字換行，若還是沒有達到同學的理想可以再次提出唷

---

7. Jordan_Tseng：
助教，我想問由於在切版班中有提到勁量讓margin統一都在下方或是至少同一個方向，所以在第五週作業新增卡片上面，萬一當有兩排時，卡片和整個區塊之間肯定比兩排中間間隔要小。如果是統一寫固定margin-bottom的值，就必須要把區塊設定padding-bottom再相加，但是切版班中老師說這樣比較不好吧。所以我一直在想怎麼做，如果是靜態網站我可以直接寫最後幾個的margin 是0，但是這個作業的用戶會新增卡片，想問css有沒有什麼方式可以讓最後幾個卡片margin-bottom是0，然後rwd到pad變成最後兩個，phone又是最後一個。另外有個情況就是如果第二行只有一個，不能讓倒數第二張卡片改樣子。用了nth-last-child之類的一直做不好。
> 助教回覆：
可以直接把父層的 padding-bottom 數字設小一點，讓每個 card 的底部間距 px + 父層 padding-bottom 會等於父層的 padding-top，這樣父層的上下內距視覺上就會是相同的，也就不用煩惱在不同斷點要消除哪些的 card 的 margin-bottom
> 而且實際上不太會把 card 的底部間距用掉唷～

---

8. Jordan_Tseng：
老師助教同學們好，axios 有兩種cdn，看老師和助教分別選了不同的，這兩種有什麼差別嗎？

> 助教回覆：
> 他們分別來自不同的公共 CDN 平台（[UNPKG](https://unpkg.com/)、[jsdelivr](https://www.jsdelivr.com/)），可以擇一載入就好哩

---

9. Harvey：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/lqigzkgx/pen/rNjBeRM),前一次的發問可能問得不清楚,所以這次問仔細一點.CSS裡設定width是為了想讓table不要占滿整個寬,然而增加這個設定後會讓我th裡設定的width沒有效果(圖裡JS的黃框處) ,想請問是哪裡出了問題!

> 助教回覆：
> 看起來是因為 Codepen、Youtube 欄位的網址是一連串的英文無法自動換行，導致壓縮了其他欄位的寬度。
上次助教提出的 `word-break: break-all;` 可以強迫讓英文單字換行，不過每個 th 的寬度百分比需要再調整一下，因為您原本是依照 table width: 100% 來安排的，一旦整體寬度變窄了，欄位比例也要再微調一下。
這邊助教修改了[同學的 code](https://codepen.io/PeiHan/pen/LYxYBBm)，同學可以參考一下哦～

---

10. Jay：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/jay0303597/pen/poRzKEY?editors=1010)，
在 HTML 第 76 行的 input 有寫限制字數的 min 和 max，但為什麼就算超過或不打還是可以順利送出表單呢？

> 助教回覆：
> min、max 屬性只是限制最大與最小值，若要加上驗證可以在每個 input 加上 required 屬性，button 的 type 屬性必須使用 submit。助教這邊寫了個 [CodePen 範例](https://codepen.io/PeiHan/pen/JjEjBdN?editors=1000)給你參考～
也可以自己另外寫 js 來做驗證，或透過第三方套件來輔助（在第七周會有講解）

---

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