# 🏅 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`
在 Day 26 有提到事件監聽內函式有一個參數（這邊以 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 / 答案 |
| --- | ----- | ----- |
| 01 | voke | [CodePen](https://codepen.io/FiSi-the-lessful/pen/WNVXRRX) |
| 02 | 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/RwXBXgv?editors=1011) |
| 03 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/zYgLgyj?editors=1011) |
| 04 | tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/jOgpgJB?editors=1011) |
| 05 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/yLmqmzg) |
| 06 | charlottelee | [CodePen](https://codepen.io/char849/pen/ExqpqrR) |
| 07 | 睿睿 | [CodePen](https://codepen.io/uwmrsusb-the-solid/pen/zYgJOaX?editors=1011)|
| 08 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/MWNqWpM) |
| 09 | Ruby | [CodePen](https://codepen.io/xivgaijl-the-selector/pen/MWNqWQg) |
| 10 | david1819 | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/Exqeaoo) |
| 11 | Hedwig | [CodePen](https://codepen.io/adirehfz-the-encoder/pen/abeaOVx?editors=1011) |
| 12 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/MWNqabd?editors=1011) |
| 13 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/QWeVLaa?editors=1011) |
|14|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/poMOyGO) |
| 15 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/xxvaOXO) |
| 16 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/WNVgoBJ?editors=1011) |
| 17 | Mos | [CodePen](https://codepen.io/mos25399/pen/jOgvBRy?editors=1011) |
| 18 | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/abeaJGq?editors=1111) |
| 19 | kun._c8_shake_it | [CodePen](https://codepen.io/barry91205/pen/vYozmpN?editors=1111) |
| 20 | brucelee0629 | [CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/wvVEJNK?editors=1011) |
| 21 | .tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/qBeMNNZ?editors=1011) |
| 22 | chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/OJKojOK?editors=1010) |
| 23 | ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/JjgayQm) |
| 24 | Ariel | [CodePen](https://codepen.io/ariel0510/pen/dyxqVGE?editors=1011) |
| 25 | 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/poMOWgW) |
| 26 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/ZEgMXZV) |
|27|Tatsu| [CodePen](https://codepen.io/chindesu0207/pen/XWvPYGG) |
|28|Jainee| [CodePen](https://codepen.io/Jainee0110/pen/NWQLxVR) |
| 29 | JIA | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/OJKoyMQ?editors=1011) |
| 30 | 610 | [CodePen](https://codepen.io/YI-LING-LIU/pen/BaXObEq?editors=1011) |
| 31 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/qBeJxXL) |
| 32 | Celine | [CodePen](https://codepen.io/szuning/pen/bGXmdJr) |
| 33 | jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/OJKogEw?editors=1011) |
| 34 | 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/Exqddbp) |
| 35 | joylu0902 | [CodePen](https://codepen.io/joylu0902/pen/JjgeXya) |
| 36 | 邵 | [CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/mdNQGBx?editors=1111) |
| 37 | jerry_66983 | [CodePen](https://codepen.io/Barry-C/pen/xxvQjpg?editors=1011) |
| 38 | Emma | [CodePen](https://codepen.io/Emma0919/pen/vYovKwy) |
| 39 | 野鴿 | [CodePen](https://codepen.io/HoshinoSyouta/pen/XWvoNBz?editors=1011) |
| 40 | Lotte | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/XWvogWq?editors=1011) |
| 41 | alec1203 | [CodePen](https://codepen.io/soloayaya/pen/yLmQPgE?editors=1011) |
|42|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/JjgxPVZ)|
| 43 | Glen_69515| [CodePen](https://codepen.io/pen/?editors=1111) |
| 44 | JRz| [CodePen](https://codepen.io/JRZHENG/pen/GRVewvb?editors=1111) |
| 45 | Jack | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/QWeRwza?editors=1011) |
|46|Amy(咂摳)| [CodePen](https://codepen.io/nnxucgmc-the-builder/pen/YzmbXvQ?editors=0011) |
|47|KOMATSU PEI| [CodePen](https://codepen.io/Komatsu2021/pen/poMmdEo?editors=1011) |
| 48 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/poMmVPw?editors=1011) |
| 49 | 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/YPKKpmw?editors=1011) |
| 50 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/KwPPmoX?editors=1011)|
| 51 | Seris | [Codepen](https://codepen.io/Dale-Chien/pen/VYZZrNW?editors=1011)|
| 52 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/NPKOdwK)

<!-- 可複製下方格式
| | | [CodePen]() |
-->