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

# 4/20 線上 Slack 助教

## 今日輪班助教時間

hsin-yu：4/20（二）
早上 10:00 - 中午 12:00，下午 1:00 -下午 5:00

## 發問規範

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

## 注意

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

## 問題

1. **Yu sung：**
老師助教同學們好，這是我的 https://v268018.github.io/question/index page
github https://github.com/v268018/question/blob/main/js/index.js
有給助教看過建議嘗試把篩選功能抽分出來(第187-196行)，
但是在產品篩選過程中，把產品加入購物車，購物車列表還會點擊時就會多次的新增。
不知道問題出在哪裡，再請助教老師同學幫我解答一下謝謝。
> 助教回覆：
>因對 productList 綁定監聽的[部分](https://github.com/v268018/question/blob/main/js/index.js#L231-L239)是放在 render() 中，因此每執行一次 render() 就會綁定一次監聽
可以在篩選產品後，在 devtool 選取 .productList，並查看 Event Listeners 會發現 click 事件綁定兩次監聽
因篩選產品時會執行到 getProductData()，執行 getProductData() 時就會重複執行到 render()，執行到這裡時 productList 就被綁定兩次監聽，因此點擊加入購物車時會執行兩次 addCart()

感謝助教建議，以參考建議修改了，不知道是否正確。再麻煩助教:pray:
然後想請問一下，如果一般用這種關注點寫法。
像這種dom監聽，一般都建議寫在初始化那邊先讓它(dom監聽)註冊會比較好呢嗎 ?
因為我發現這樣就比較不會衝突到。
之前就是因為寫在reander那邊才會沒有發現到助教幫我點出的那個問題。卡了半天 .. :smiling_face_with_tear:
gitpage https://v268018.github.io/question/
github https://github.com/v268018/question

>修改的寫法目前測試沒問題喔！不會重複綁定監聽，因 .productList 元素原本就存在，因此在初始化就註冊是可以的，不需在渲染資料（render 函式）才綁定~

---

2. **Jordan_Tseng：**
老師助教同學好，我想請教，這個c3圖表的懸浮文字如何才能改顏色之類的。他的名稱是叫什麼？

> 助教回覆：
> 滑鼠移到上方會出現的懸浮文字應該是 tooltip
這裏有一些 tooltip 的相關設定
https://c3js.org/reference.html#tooltip-show
不過如果是改文字顏色可能要改 CSS
目前測試改 .c3-tooltip td 的 color 可以改變文字顏色
也可以參考原本有的設定的 css，應該會比較容易找到想改的地方～
https://github.com/c3js/c3/blob/3aac02abe4/c3.css#L139

---
3. **雅喬：**
老師助教同學們好，這是我的codepen https://codepen.io/angel011103/pen/qBRMoBe?editors=0011
正跟著老師影片做訂單頁的status狀態欄，預期結果是點下status狀態會跳另一個值但是發現並沒有，再請老師助教同學幫忙解答，謝謝
> 助教回覆：
> 因第 44 行 `if(item.paid == 'true')`，會將 item.paid（布林值 true）和字串 'true' 轉為數字比較，'true' 轉數字是 NaN，true 會是 1，因此 true == 'true' 會是 false（[參考](https://stackoverflow.com/questions/11363659/why-does-true-true-show-false-in-javascript)），因此不管 item.paid 是 true 或 false，orderStatus 都會是 '未處理'
> 第 94 行的 `if(status == true)` 也須注意一樣的狀況，因 status 是字串，true 是布林
解決方式可以參考 ([第 11 題](https://hackmd.io/@hexschool/By8mzBWU_) **Page Shih** 同學的問題，SONYKO 助教的回覆～

---
4. **Harvey：**
老師好,這是[最終作業的首頁](https://codepen.io/znlcgmgk/pen/RwKKBbM),想問的問題是 HTML 最下面 JS 的部分,想知道 435 - 441, 446-454 其中的詳細解釋,只能大概知道是在處理鼠標以及原素的位置
> 助教回覆：
> 可以先參考 [說明頁面](https://htmldom.dev/drag-to-scroll)、[Source](https://github.com/phuoc-ng/html-dom/blob/master/demo/drag-to-scroll/index.html)
> 435 - 441 行的 pos 主要是記憶當 mousedown 事件發生時滑鼠游標的位置
ele.scrollLeft 和 ele.scrollTop 是取得 ele 捲動的幅度（參考：[scrollLeft](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollLeft) [scrollTop](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/scrollTop)），因 ele 在 mousedown 事件時還沒有任何移動，因此 ele.scrollLeft 和 ele.scrollTop 都會是 0
e.clientX、e.clientY 則是事件提供的滑鼠游標在瀏覽器窗口的 x y 位置

>448 - 449 行是 mousemove 事件發生時，拿這時候的 e.clientX、e.clientY 位置和 pos 存的位置相減，取得 x y 移動的距離
452 - 453 行將 x y 移動的距離賦予到 ele.scrollLeft 和 ele.scrollTop 讓 ele （在滑鼠游標移動時）依照相同的距離捲動

為什麼 443,444,459,460 是用 document 監聽而不是 ele 呢?
>443 - 444 和 459 - 460 行如果是對 ele 監聽，當滑鼠拖曳到 ele 範圍外就無法監聽到 mouseup 事件（可以將 document 改成 ele 測試），對 document 監聽在使用上會比較順暢

---
5. **jacky hu：**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/Orion_jacky/pen/GRrXdZd?editors=0010)，我原本預期「JS 第 93 行下拉選單先選擇別的種類，再選擇全部後，會出現全部商品」，但卻出現「下拉選單先選擇別的種類，再選擇全部後，全部的商品沒有顯示出來」，想問下問題出在哪裡？
> 助教回覆：
> 因選擇其他種類，再選擇**全部**時，執行完第 95 行判斷式 renderProducts() 後，還是會繼續往下執行 99 行以後的 `let str= ""` 及之後的 `forEach`，因此執行到最後 115 行的 `productList.innerHTML = str` 會是空的 str
可以再調整一下判斷式的部分～
---
（這裡只能由助教自行增加問題，請大家將問題放在 thread 上）