---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 Day 27 - 表單取值觀念

今天要來補充一些表單取值的觀念，請大家跟著一起練習

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

HTML

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

JS

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

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

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

> `.value` 取出來的值為字串

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

範例如下：
HTML

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

JS

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

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

結果：


### 2. `.value`, `.getAttribute('value')` 的差異

HTML

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

JS

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

triggerBtn.addEventListener('click', function(e){
    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 type="button" id="triggerBtn" >觸發按鈕</button>

JS

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

triggerBtn.addEventListener('click', function(e){
    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()` 才會。

### 補充 `e.target.value`
在[前一天](https://hackmd.io/Wl1vhP5RRR-6W-p1MnI3Mg)有提到事件監聽內函式有一個參數（這邊以 e 表示），e 是一個物件，其中有一個 target 屬性為觸發事件時的元素，此時就可以直接利用 `e.target` 搭配 `.value` 來取得該表單元素觸發事件時的值。

HTML

<select name="num" class="num">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

JS

const num = document.querySelector('.num');
num.addEventListener('change', function(e) {
  // 當 select 選項改變時就會觸發
  // 觀察下方印出的值
  console.log(e.target);  
  console.log(e.target.value);  
  console.log(typeof(e.target.value));
});

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

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 type="button" id="triggerBtn">觸發按鈕</button>

JS

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

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

**進階題**

監聽下方 select 元素（ `.selectPets` ），當改變 select 選項時，讓 p 標籤內呈現出該選項的文字。
（提示：運用 change 事件及表單取值）

HTML

<select name="pets" class="selectPets">
  <option value="" selected disabled>Choose</option>
  <option value="Dog">Dog</option>
  <option value="Cat">Cat</option>
  <option value="Rabbit">Rabbit</option>
</select>
<p class="choosePet">Pets</p>

JS

const selectPets = document.querySelector(".selectPets");
const choosePet = document.querySelector(".choosePet");
/* 程式碼撰寫 */
...

## 回報流程

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


<!-- 解答：

const el = document.querySelector('#targetInput');
const 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"))
})

進階題：
const selectPets = document.querySelector(".selectPets");
const choosePet = document.querySelector(".choosePet");
/* 程式碼撰寫 */
selectPets.addEventListener("change", function(e) {
choosePet.textContent = e.target.value; // 寫法一
choosePet.textContent = selectPets.value; // 寫法二
});
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| 嗶嗶羊#8042 | [Codepen](https://codepen.io/mazizlte-the-typescripter/pen/xxzRyEO?editors=1011) |
| 薯餅#3581 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/rNKWzmP) |
| Tuhacrt#0008 | [codepen](https://codepen.io/Tuhacrt/pen/gOKLxeR) |
| AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/jOKVLGK?editors=1011) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/zYaKyRO) |
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/rNKWwBm) |
| 黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/NWzbvwy) |
|威0#6919|[Codepen](https://codepen.io/n0918679182/pen/yLEVoKQ?editors=0011)|
|VT#0895 | [Codepen](https://codepen.io/vt197/pen/LYrbjrG)|
|suihsilan#9485 | [Codepen](https://codepen.io/suihsilan/pen/bGKBrrY?editors=1010)|
|albee#9121|[Codepen](https://codepen.io/albee-chang/pen/gOKLxqX?editors=1011)|
|Clara#1275|[Codepen](https://codepen.io/bsupixqu/pen/xxzRLBw?editors=1011)|
|xherobruce#6825|[Codepen](https://codepen.io/winwinbruce/pen/vYryJMm)|
|shinyhung#3825|[Codepen](https://codepen.io/sean_1215/pen/PoabJqe?editors=1011)|
|柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/QWxGqNo?editors=1011)|
|末次#0236|[Codepen](https://codepen.io/yunjulee/pen/GRGNMoQ)|
|hsiung阿熊#4079|[Codepen](https://codepen.io/hsiungchi/pen/dyKOVYW)|
|予予#9627|[Codepen](https://codepen.io/kiqzcraa/pen/BaVQdGY?editors=1111)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/jOKVGrR)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/RwJoLMJ?editors=1011) |
| mandylai#4055 | [CodePen](https://codepen.io/mandy-lai-2/pen/MWXbEJW) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/gOKLGRj) |
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/rNKWGQW?editors=1011)|
|楓之聲#6945|[Codepen](https://codepen.io/sshane258/pen/BaVQwbe)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/YzvproO)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/VwdmMWr)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/vYryeqV?editors=0011)|
| m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/YzvprmO) |
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/OJEbOyK)
|amy芳#1385|[Codepen](https://codepen.io/amy-chieng/pen/ExRNbyo)|
|勁辣雞腿寶#5817|[Codepen](https://codepen.io/orz311013/pen/YzvpEpB?editors=1010)|
|yawun#0042|[CodePen](https://codepen.io/monicalin/pen/LYrbOyg)|
|心幻羽#0056|[CodePen](https://codepen.io/linglingsyu/pen/oNyYooJ)|
|Hilda#7085|[CodePen](https://codepen.io/vwquikad-the-vuer/pen/PoabOjo)|
|Peng#9811|[CodePen](https://codepen.io/peng-027/pen/xxzRPVW)|
|CloThEs#7837|[CodePen](https://codepen.io/CloThEsZ/pen/ExRNbNQ)|
|Potatolee#7749|[CodePen](https://codepen.io/potatoleee/pen/qBKqVmM?editors=1111)|
|圈圈#4060|[codepen](https://codepen.io/whejfczn-the-bold/pen/zYaoPwR)|
|RyanTsai#8906|[CodePen](https://codepen.io/linlaose/pen/LYrbeGw?editors=1011)
Ruby Chen#7452|[codepen](https://codepen.io/ruby92429/pen/PoabEPb?editors=1011)|
jimmyFang#9575|[codepen](https://codepen.io/pohxiqqo/pen/KKeNZZB?editors=0011)|
| Yiru#0236 | [Codepen](https://codepen.io/yiru94/pen/rNKWzgB?editors=1011) |
| -------------------- | -------------------------------------------------------------------------------- |
| 王懷英#7271 | [Codepen](https://codepen.io/huaiying/pen/xxzRpPK) |
| Hazel.#6020 | [Codepen](https://codepen.io/Hazelhsieh/pen/BaVQJRZ?editors=1011) |
| Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/GRGNyEr) |
| masterYan#2480 | [Codepen](https://codepen.io/htzwgoqt-the-looper/pen/rNKWGbj?editors=1011) |
| LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/yLEVpWw) |
| hannahTW#2224 | [Codepen](https://codepen.io/hangineer/pen/xxzRYPq?editors=1011) |
| WEI_RIO#9342 | [Codepen](https://codepen.io/wei_wu/pen/gOKLvLz?editors=1011) |
| Sentiments#4883 | [codepen](https://codepen.io/Sentiments/pen/KKeNQeK?editors=1011) |
| PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/mdKOXGG) |
| Cookie SSS#6991 | [Codepen](https://codepen.io/sqhjikpa-the-selector/pen/xxzRYeX?editors=1011) |
| 雷雷#7844 | [Codepen](https://codepen.io/lei-yi-jie/pen/MWXbQxy?editors=1010) |
| 大衛#4869 | [codepen](https://codepen.io/exnsrpjc/pen/PoabEQj?editors=1011) |
| banazita#5143 | [CodePen](https://codepen.io/banazita/pen/MWXbOQE?editors=1111) |
| jackson204#6363 | [CodePen](https://codepen.io/jackson204/pen/zYaoWwp) |
| charlottelee849#0366 | [CodePen](https://codepen.io/charlotte-lee/pen/rNKWdpp?editors=1011p) |
| Greta#0837 | [CodePen](https://codepen.io/gretali/pen/wvXombo) |
| Hironaka#7367 | [CodePen](https://codepen.io/Hironaka0815/pen/yLEVjJj?editors=1010) |
| IreneY#0086 | [codepen](https://codepen.io/HalfPlannedJourney/pen/jOKVzRL) |
| RJRS#9430 | [CodePen](https://codepen.io/RJRS/pen/WNyGaJN) |
| Cream#3449 | [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/ExRNbqO?editors=1111) |
| jacky010080#0880 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/oNyYdRz?editors=1011) |
| 出事了阿伯#9923 | [CodePen](https://codepen.io/BradpittLai/pen/MWXbBbp?editors=1011) |
| 萱仔#0781 | [CodePen](https://codepen.io/ting-hsuan/pen/XWYNBXa?editors=1010) |
| CofCat#9226 | [CodePen](https://codepen.io/cofcat456/pen/qBKqypJ?editors=1111) |
| 無名#6427 | [CodePen](https://codepen.io/Nomoney/pen/oNyYeeX) |
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/dyKOzrO) |
| poetry1933#2713 | [Codepen](https://codepen.io/poetry1932/pen/oNyYPYN?editors=1111) |
| 我是泇吟#5189 | [CodePen](https://codepen.io/kljuqbxs/pen/mdKOjZJ) |
| azami#5986 | [CodePen](https://codepen.io/azami/pen/BaVQPxo) |
| yoshidc#0455 | [CodePen](https://codepen.io/yoshiyyc/pen/RwJoYep) |
| Judy Wei#6103 | [CodePen](https://codepen.io/Judy0718/pen/jOKVvoQ) |
| Kimi #9564 | [CodePen](https://codepen.io/kimihu91/pen/VwdKgpQ) |
| Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/dyKOqQX?editors=1011) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/yLEVGKR) |
| 粉蒸肉#6214 | [Codepen](https://codepen.io/wrightyu/pen/LYrbMoN?editors=1111) |
| yen#5757 | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/oNdPgqY?editors=1011) |
| Data#9297 | [Codepen](https://codepen.io/kirakira72/pen/QWxGMar) |
| Loran#1105 | [Codepen](https://codepen.io/loranlin/pen/NWzbXgX?editors=1011) |
| 蓁心#6229 | [Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/ZERBVWj?editors=1011) |
| 肉桂卷#0625 | [Codepen](https://codepen.io/ginnlee/pen/QWxGYOR?editors=1011) |
| 安o#2448 | [Codepen](https://codepen.io/JzhenAn/pen/dyKOrMj) |
| Vera#5592 | [CodePen](https://codepen.io/skvera/pen/LYrbamX) |
| 竹輪#3335 | [CodePen](https://codepen.io/chikuwa0120/pen/GRGNLqZ) |
| ssozr#4680 | [codepen](https://codepen.io/ssozr/pen/JjZbqKK?editors=1011) |
| kancheng#3915 | [CodePen](https://codepen.io/kancheng/pen/WNyRNee?editors=1111) |
| Jill#5577 | [CodePen](https://codepen.io/Jillkate/pen/BaVQgyg) |
| Lucie#3831 | [Codepen](https://codepen.io/bisespei/pen/PoaWzGv) |
| Ron Liang#7277 | [Codepen](https://codepen.io/ron-go/pen/KKeaaZg) |
| JustinLiu#9699 | [CodePen](https://codepen.io/justin0227/pen/LYrxWRo?editors=0011) |
| Wei#2330 | [Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/LYrxWmY) |
| Chung#5951 | [Codepen](https://codepen.io/yuju16/pen/dyKNWmz?editors=1011) |
| Silvialu#4521 | [Codepen](https://codepen.io/Silvia091640/pen/KKeNoKV) |
| beta lin#1445 | [CodePen](https://codepen.io/linbeta/pen/MWXJoME) |
| SASIMI#5099 | [codepen](https://codepen.io/sashimi1327/pen/vYrNPNg) |
| William Lai#0196 | [codepen](https://codepen.io/lai-weihan/pen/xxzgLvb) |
| 母湯#7211 | [codepen](https://codepen.io/tommyshih77/pen/MWXJvRZ?editors=1011) |
| 健育#5748 | [codepen](https://codepen.io/c1317156/pen/VwdPXZX?editors=1111) |
| YI#0863 | [codepen](https://codepen.io/YI0305/pen/abKpYpL?editors=1011) |
| Mylène#2481 | [Codepen](https://codepen.io/hamajibashi/pen/qBKqxmr) |
| 法希娜#3206 | [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/BaVQbgz) |
| yumy#1940 | [Codepen](https://codepen.io/yumyyang/pen/xxzgVvL) |
| Yishan#4902 | [Codepen](https://codepen.io/gdjrehhw-the-animator/pen/ExRWxZm?editors=1010) |
| PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/KKeWpXJ) |
| KC_8685#9343 | [Codepen](https://codepen.io/cathy7411/pen/PoapqRR) |
| 芮綺#5224 | [Codepen](https://codepen.io/zhan70/pen/GRGWgLN?editors=1011) |
| 鑫鑫#4346 | [CodePen](https://codepen.io/Neil1024/pen/NWzprXW?editors=1011) |
| Cliff#4606 | [Codepen](https://codepen.io/Cliff_hex/pen/MWXpzBj?editors=1011) |
| Yuna Huang#2692 | [Codepen](https://codepen.io/Yuna1002/pen/GRGWPRb?editors=1011) |
| FiReBrO #0557 | [Codepen](https://codepen.io/firebro42/pen/GRGWeze) |
| yaru#6308 | [CodePen](https://codepen.io/lszaietc/pen/RwJpdXd) |
| Ryan Chiang#6649 | [Codepen](https://codepen.io/ryanchiang/pen/gOKWpjG?editors=1111) |
| hungya#0773 | [Codepen](https://codepen.io/hungya777/pen/oNyWbvM?editors=1011) |
| Rr#2215 | [Codepen](https://codepen.io/rufangcheng/pen/PoapxqB) |
| yoyo#1003 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/jOKmmaK?editors=1111) |
| cbs#9007 |[Codepen](https://codepen.io/wasdjk/pen/mdKwJxO)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/abKwwVZ?editors=1011)|
|bingsu#2362|[Codepen](https://codepen.io/pmyfr/pen/MWXoQOX?editors=1011)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/dyKVPBq)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/yLEpzpO)|
|Baozi#2042|[Codepen](https://codepen.io/lillianyu/pen/wvXpYdZ)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/rNKpgLx?editors=1011)|
|pss940909#8650|[CodePen](https://codepen.io/pss940909/pen/LYrQRxE?editors=1111)|
|君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/ZERJYNJ?editors=1011)|
|阿風#6890|[codepen](https://codepen.io/Afonguwu/pen/oNyqZOb)|
|入門小菜G#0191|[codepen](https://codepen.io/DennisLiu123123/pen/XWYqbLd)|
|狸貓#5863|[codepen](https://codepen.io/tanuki320/pen/GRGMbjq?editors=1010)|
|三隻小貓#1905|[CodePen](https://codepen.io/bagelover/pen/eYKjOEQ?editors=1011)|
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/ExRRqZo?editors=0011)|
|魚子醬#5220|[CodePen](https://codepen.io/haihsuan/pen/VwdGpPx?editors=1111)|
|郭芙蘭#6374|[CodePen](https://codepen.io/flora_Kuo/pen/qBKMpdj?editors=1011)|
|Ringo#7583|[CodePen](https://codepen.io/ringolai1988/pen/KKeJpQw?editors=1011)|
|Mia小福#4473|[CodePen](https://codepen.io/a0950271/pen/jOKdGJP?editors=1010)|
|samger#0808|[CodePen](https://codepen.io/lee-wei-hong/pen/OJEqWXe)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/qBMdVWe?editors=1011)|