--- tags: JS 直播班 - 2021 春季班 --- # 3/17 線上 Slack 助教 ## 今日助教輪班時間 穎旻：3/17 (三) 早上 10:00 - 中午12:00，下午 2:00 -下午 6:00 ## 發問規範 老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？ ## 注意 1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖 ![](https://i.imgur.com/nHE3sOx.png) 2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖 3. 助教會依照 Slack 上的順序回覆問題 4. 以下問題區塊只能由助教自行增加 5. 助教會將回覆寫在下方問題區塊 ## 問題 1. 穎旻： 老師助教同學們好，這是我的 [Codepen](https://)，我原本預期「JS 第 8 行會出現數字 8」，但卻出現「預期外的結果是 0」，想問下問題出在哪裡？ > 助教回覆： 因為在....所以..，於是產生 0 的結果 --- 2. Aasta Chen ： 老師助教同學們好，我不是Codepen那些部分有問題，而是對於第四關下列取值的部分，我寫的出來，但理解不了為什麼？想請問這個部分到底是為什麼這樣取值呢？ ``` 體重${bmiSatesData[bmiHistoryData[bmiHistoryData.length-1].state].state}！ 健康指數為${bmiSatesData[bmiHistoryData[bmiHistoryData.length-1].state].color}！ ``` > 助教回覆：可以將取值的部分先做拆解， > 因為已知最後的結果會是 "overWeight" 所以可以先以這個目標來取值bmiStatesData["overWeight"].state -> 但因為需要拿到記錄內的最後一筆，所以替換成第二筆 -> bmiStatesData[bmiHistoryData[2].status].state > 因為不能寫死第二筆，所以將 [2] 替換為 [bmiHistoryData.length - 1]， 得到最後的結果 bmiStatesData[bmiHistoryData[bmiHistoryData.length - 1].status].state --- 3. carol liao： 老師助教同學們好，這是我的 [Codepen](https://codepen.io/yaxuan/pen/ExNJwMO?editors=0010)，在 130 行輸入的值做判斷，但是必填只出現在第一個欄位，想請問要怎麼做才可以讓每個欄位都出現必填 > 助教回覆： 在第七週會使用套件做驗證的部分，做法是將不同欄位的錯誤訊息放在一個物件內（屬性名稱會對應到 input 的 class 或是id），使用 Object.keys 去跑迴圈對應到相同的 class 或 id > 這邊如果不太理解也可以先跳過，做基本的驗證即可，也就是只要有任何一個欄位沒有填寫就出現 alert 通知，或是更簡單的做法是在 input 加上 required 屬性，不過 button type 需要改為 submit 唷 --- 4. think： 老師助教你好，[這是我第五週主線codePen](https://codepen.io/gjjzibjk/pen/yLVWLpx?editors=1011)，在codePen按新增功能時，Console不會有任何紅字產生，而我在自己的網頁上，按新增時會跑出下方影片的狀況，但是功能都是有的，想問這是什麼原因? > 助教回覆： 這邊可以將 1-10 行以及 220-222 行移除，雖然助教和你跑出來的錯誤訊息不太一樣，但是移除後就不會有錯誤了。在 Codepen 中是可以不用加上 <html><body>的，所以移除是沒有問題的，另外會造成錯誤的原因是因為他找不到第 8 行的 all.css 以及第 220 行的 all.js 喔 --- 5. ZengZeng ： 老師助教同學們好， 我想詢問上次穎旻助教直播內容分享BMI kata LV.2的寫法(附上節錄下來的codepen 與截圖 ) 請問這個部分 if 判斷式的運用，不太理解為什麼可以這樣使用、還有「 !== 」是什麼意思呢？ > 助教回覆： !== 翻成中文的話是「不等於」的意思。這裡的判斷是 當 status 不等於空字串時就呈現 console.log 內的文字，反面意思就是當我在 printBmi 帶入的不是數字，而是中文或是其他符號時，在第一次 if 判斷的時候就不會進入任何一個區間，也就拿不到 status 了，所以此時 status 就會是空值。第二次的判斷主要是要預防空的 status。 --- 6. Qizhen,Lin ： 老師助教同學們好，這是我的 Codepen，我想問是 JS 的 37行開始，我們塞了 li 進去，那html 的 li 一定要刪除嗎?會不會影響排版呢?如果又新增新的ul 裡面包好幾個 li 資料，那JS還會影響到原本 html 的li嗎?還是要在JS在寫一次 forEach呢?謝謝 > 助教回覆： HTML 內 的 li 其實不刪除也不會有問題，但是還是會建議你刪除XD。不會有問題的原因是因為 innerHTML 會先清空抓到的元素節點內的值，再放你要賦予的值，所以在 innerHTML 之前，HTML ul 內的元素會先被清空唷。 --- 7. carol liao ： 老師助教同學們好，這是我的 [Codepen](https://codepen.io/yaxuan/pen/ExNJwMO?editors=1010)，用 querySelectorAll 選擇 calss，在 131 行跑迴圈，符合判斷條件就出現必填，但是如果欄位輸入值按 btn 後要怎麼讓必填消失，因為只想到 136 行的做法，但是也沒成功 > 助教回覆： 目前你的做法抓到的都是 p 標籤，並沒有對應欄位，如果要取消特定欄位的驗證資訊需要一一比對，在寫法上會有點不好操作，使用 change 做監聽，看是哪一個欄位不是空的時候才取消驗證資訊。這部分的實作我也會在第七週的助教直播中講解哩。 --- （這裡只能由助教自行增加問題，請大家將問題放在 [thread](https://hexschool-share.slack.com/archives/G01H6GA03UH/p1615946400008300) 上）