# 🏅 DAY26 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

表單取值 - `.value`, `.getAttribute('value')` 觀念
---
今天要來補充一些表單取值的觀念，以下有些部分內容並沒有在課堂中提到，
不過助教發現問答區中有一些同學對於「value」的用法存有疑惑，因此今天的任務就是好好的認識它!

## 觀念一: `.value` 取出的值是「字串」
這邊以 input 的 value 取值為例，請觀看以下範例:

HTML

<input type="text" id="targetInput">
<button id="triggerBtn">觸發按鈕</button>

JS

let el = document.querySelector('#targetInput');
let triggerBtn = document.querySelector('#triggerBtn');

triggerBtn.addEventListener('click', function(){
    console.log(el.value);
    console.log(typeof(el.value));
})

如果在 input 輸入數字 123 以後點選「觸發按鈕」，可以在 console 中觀察到以下結果:


**因此如果要對表單的「數值」進行運算，請記得要先使用 `parseInt` 做型別轉換。**

範例如下:
HTML

<input type="text" id="targetInput">
<button id="triggerBtn">觸發按鈕</button>

JS

let el = document.querySelector('#targetInput');
let triggerBtn = document.querySelector('#triggerBtn');

triggerBtn.addEventListener('click', function(){
    let newValue = parseInt(el.value);
    console.log(newValue);
    console.log(typeof(newValue));
})

結果:


## 觀念二: `.value`, `.getAttribute('value')` 的差異

**以下觀念針對常用的「input」這個 HTML 標籤做說明:**

> 請同學在 CodePen 執行以下程式碼，並點選「觸發按鈕」觀察結果。

HTML

<input type="text" id="targetInput" value="123">
<button id="triggerBtn">觸發按鈕</button>

JS

let el = document.querySelector('#targetInput');
let triggerBtn = document.querySelector('#triggerBtn');
console.log(`el.value: ${el.value}`);

triggerBtn.addEventListener('click', function(){
    el.value = "任意填入的值";
    console.log(`el.value: ${el.value}`);
})

同學的 console 結果應該會呈現如下:


看到這邊，同學是不是認為 `<input type="text" id="targetInput" value="123">` 這行程式碼的 `value="123"` 應該已經被修改為 `value="任意填入的值"` 了?

>不過，如果我們將程式碼修改如下，並一樣的點選「觸發按鈕」觀察結果:

HTML

<input type="text" id="targetInput" value="123">
<button id="triggerBtn">觸發按鈕</button>

JS

let el = document.querySelector('#targetInput');
let triggerBtn = document.querySelector('#triggerBtn');

triggerBtn.addEventListener('click', function(){
    el.value = "任意填入的值";
    console.log(`el.value: ${el.value}`);
    console.log(`el.getAttribute('value'): ${el.getAttribute('value')}`);
})

可以發現網頁上 input 欄位「輸入的值」的確已經被更改為 "任意填入的值"


但是 `el.value` 與 `el.getAttribute('value')` 卻是不一樣的，呈現結果如下:


### 由此可知，修改 `el.value` 不等於修改 HTML 標籤的 value 屬性值

**小統整:**
* `el.value` 對應的是 input 欄位目前「輸入的值」
* `el.getAttribute('value')` 對應的是 input 欄位的「預設屬性值」
* 修改 `el.value` 並不會影響 input 標籤的 value 預設屬性，使用 `setAttribute()` 才會。

問題
---
請修改 JS 程式碼來符合下面要求，以下為點擊「觸發按鈕」後所需觸發的程式行為。
(請觀察網頁畫面渲染的變化)

1. 將 newValue 轉型為數字型別。
2. 執行 newValue += 300;
3. 將 `el.value` 重新賦值為 newValue。
4. 用 console.log 輸出 `el.value`。
5. 使用 `getAttribute` 取得 el 的 「value 屬性值」，並透過 console.log 輸出。

HTML

<input type="text" id="targetInput" value="200">
<button id="triggerBtn">觸發按鈕</button>

JS

let el = document.querySelector('#targetInput');
let triggerBtn = document.querySelector('#triggerBtn');

triggerBtn.addEventListener('click', function(){
    let newValue = el.value;
    /* 程式碼撰寫區 */
})

回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）


<!-- 解答
let el = document.querySelector('#targetInput');
let triggerBtn = document.querySelector('#triggerBtn');

triggerBtn.addEventListener('click', function(){
let newValue = el.value;
newValue = parseInt(newValue);
newValue += 300;
el.value = newValue;
console.log(el.value);
console.log(el.getAttribute('value'));
})
-->

| Slack | CodePen |
|:-----------:|:----------------------------------------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/pen/wvqYNRX |
| CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/NWvOowM |
| 蔡明達 | https://codepen.io/bmzpfyxe/pen/NWgKQZB?editors=1111 |
|Aaron Tu|https://codepen.io/aarontu/pen/JjymxMd|
| Kelvin Hsu | https://codepen.io/kelvin001/pen/VwzEgdm?editors=1111 |
|lumei|https://codepen.io/l_umei/pen/GRvYzey|
|Arista|https://codepen.io/arista-hsieh/pen/QWMZYPz|
| POPEYE | https://codepen.io/popeye_ux/pen/mdMzvZp |
| 劉維倫 | https://codepen.io/lun0223/pen/MWvPxgN?editors=1011 |
|jojoy|https://codepen.io/jojoy/pen/eYEPXOY?editors=1011|
| Jun Ting Lin | https://codepen.io/jake1155/pen/qBXJvER |
Tim Lin|https://codepen.io/TimmyLin/pen/VwzERaM
| Sam | https://codepen.io/sam-hsu/pen/abyRMmB |
| 米米 | https://codepen.io/Jameshsu0407/pen/zYdmbwK?editors=0011 |
|tingyu|https://codepen.io/dgltu/pen/NWvOozz?editors=1111|
| Jerry Yen |https://codepen.io/JerryYen/pen/vYJVPZj |
| Elaine Liu | https://codepen.io/elaine7598/pen/vYJVPGp?editors=1011 |
|鄭安志|https://codepen.io/lwmtsgek/pen/OJjBqEq?editors=1011|
|kk|https://codepen.io/potatokaka/pen/PoKyLpy?editors=1011|
| Yunei | https://codepen.io/Yunei/pen/oNeaOgP |
| Gill | https://codepen.io/Gill-Chin/pen/eYEPoNR?editors=0011 |
| YuriT | https://codepen.io/wenfisht/pen/YzxJBaN |
| Iris Huang | https://codepen.io/ythuang/pen/mdMzgeY |
| YC | https://codepen.io/YCLu/pen/eYEPXvJ |
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/NWvOmxx?editors=1011 |
|Anna|https://codepen.io/kycrleao/pen/gOxByxb?editors=1011|
|Metis Teng|https://codepen.io/metis-teng/pen/GRvYLmK?editors=1011|
|陳sam|https://codepen.io/euldpliv/pen/BadqEPz |
|BeanHuang|https://codepen.io/Beanhuang/pen/porxmoL
|Pei Ying|https://codepen.io/Pei-Ying/pen/YzxJbXy?editors=1011 |
|吉兒| https://codepen.io/Jillkate/pen/XWaxwjG |
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/QWMZRmB |
| 雪莉 |https://codepen.io/utshang216/pen/GRvYadv |
| Bella Shya | https://codepen.io/BellaXie/pen/JjymqVK?editors=1010 |
|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/gOxBNgj?editors=1111|
|Cheng pei-hsuan|https://codepen.io/PaCheng/pen/zYdGKpO|
|Joey|https://codepen.io/Joey-Chen/pen/yLoRdRO|
|大衛|https://codepen.io/exnsrpjc/pen/mdMzgRN?editors=1111|
|有廖先生(Rain)|https://codepen.io/billpop741/pen/LYjgvda |
|phi|https://codepen.io/aiya861202/pen/eYEmVjR|
|陳暐中|https://codepen.io/wei-z/pen/bGrmXeV?editors=1012|
| 傅劍軒 | https://codepen.io/seonkuraito/pen/WNEaPZJ?editors=0010 |
|張喆|https://codepen.io/wow767t/pen/GRvwKpj|
| Lai | https://codepen.io/co_lai/pen/OJjBqXB?editors=1011 |
| ZOE WU | https://codepen.io/Zoechiueh/pen/dyzQbOY?editors=1011 |
| Yof |https://codepen.io/yangyof/pen/YzxRKap?editors=1011 |
|阿和|https://codepen.io/shnny/pen/vYJQBQm?editors=0011|
|Hsiang|https://codepen.io/chao20211/pen/MWvzYNG?editors=1010|
|kailun|https://codepen.io/Kailun/pen/gOxQpLg|
| Genos | https://codepen.io/pb220416/pen/yLoQYBW |
|yunyi|https://codepen.io/yunyi12374/pen/ZEJbKVW?editors=1011|
|PeggyTsai|https://codepen.io/pei-chi-tsai/pen/rNzQOQj?editors=1010|
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/LYjXGYr?editors=0011 |
|鉦勝|https://codepen.io/atckmax823/pen/zYdMvQz?editors=1111|
|Calon|https://codepen.io/Calon0118/pen/mdMQPqR|
|Steven Chan | https://codepen.io/Steven1220/pen/RwZqGqw?editors=1011 |
|Jasper|https://codepen.io/li-jasper/pen/OJjabNp |
|Bonnie|https://codepen.io/bonnieli1414/pen/PoKxbaJ?editors=1011 |
| 三隻小貓 | https://codepen.io/bagelover/pen/ExvOEdW |
| Jocelyn| https://codepen.io/enjoyful/pen/KKvroJw?editors=1011|
| Louis| https://codepen.io/Louis164156/pen/XWayqoq?editors=1111|
|Phil|https://codepen.io/ctkeftjp-the-animator/pen/VwzVdJP?editors=1011 |
| Riley | https://codepen.io/jjpxbprd/pen/vYJQaLJ |
|Alvin|https://codepen.io/Alvin20201116/pen/yLoQqwY?editors=1011|
|AKI| https://codepen.io/akichen27/pen/xxLQymb|
|Jie Du|https://codepen.io/qgqonost-the-flexboxer/pen/MWvzBNe?editors=1011|
| 肉魚 | https://codepen.io/zoechen13/pen/BadGeGm |
| Yashien Lin | https://codepen.io/YashienLin/pen/qBXJeVQ |
|乃萱|https://codepen.io/nainaikuo/pen/mdMaoyW?editors=1011|
| LTL | https://codepen.io/ltlin93/pen/Vwzqopx |
| Jessie | https://codepen.io/jssanji03/pen/JjyxRby ｜
|Gui|https://codepen.io/guitimliu/pen/RwZvgeL|
|Sandy|https://codepen.io/Sandy_L/pen/YzxBYYv?editors=0011|
|蔣秉彣|https://codepen.io/the-pierre/pen/WNEmvpx?editors=1010|
| Sylvia-H | https://codepen.io/Cosmosheart/pen/vYJPNxK?editors=0011 |
| ZY Hsu | https://codepen.io/zihyin/pen/yLowJww?editors=1011 |
|danny123| https://codepen.io/binlandz123/pen/qBXgNgR?editors=1010 |
|debby yeh|https://codepen.io/bhliyoup/pen/oNeOLRb?editors=1011|
|kevinhes|https://codepen.io/kevinhes/pen/mdMgKRQ?editors=1011|
|小K|https://codepen.io/kelen1995/pen/QWMXqwz|
|傑瑞|https://codepen.io/auatwood909815/pen/rNzEOaw?editors=1111|
|艾瑞克|https://codepen.io/ericla/pen/PoKMqyy?editors=0011|
|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/VwzoNGL?editors=1111|
| Juno Li | https://codepen.io/Juno026/pen/KKXPdOa?editors=1011 |
paul|https://codepen.io/printfootya/pen/gOGYqqv?editors=1011|
|Hamaji| https://codepen.io/hamajibashi/pen/MWEYJLw |
|YOYO|https://codepen.io/lumedkle/pen/oNGgdrm?editors=1011|
Jeff|https://codepen.io/jeff-cheng/pen/abLvMYe?editors=1011|
Zooey Cheng|https://codepen.io/noraneko0430/pen/RwLrRgr?editors=1011|
Keep|https://codepen.io/keep-/pen/JjrGbea?editors=1011|
|Clara|https://codepen.io/ClaraChen/pen/dyzaMBo?editors=1011|
| Aya | https://codepen.io/NoNameNote/pen/OJxNrZQ |
|ShinyChen| https://codepen.io/shinychen/pen/RwLBLvN |