---
# System prepended metadata

title: "\U0001F3C5 Day 27 - 表單取值觀念"
tags: [JS 直播班 - 2024 秋季班]

---

# 🏅 Day 27 - 表單取值觀念

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

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

HTML
```htmlembedded=
<input type="text" id="targetInput">
<button type="button" id="triggerBtn">觸發按鈕</button>
```
JS
```javascript=
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 中觀察到以下結果：

![](https://i.imgur.com/18bzrew.png)
> `.value` 取出來的值為字串

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

範例如下：
HTML
```htmlembedded=
<input type="text" id="targetInput">
<button type="button" id="triggerBtn">觸發按鈕</button>
```
JS
```javascript=
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));
})
```
結果：

![](https://i.imgur.com/k18ol8z.png)



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

HTML
```htmlembedded=
<input type="text" id="targetInput" value="123">
<button type="button" id="triggerBtn">觸發按鈕</button>
```
JS
```javascript=
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 結果：

![](https://i.imgur.com/HYHEDTk.png)


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

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

HTML
```htmlembedded=
<input type="text" id="targetInput" value="123">
<button type="button" id="triggerBtn" >觸發按鈕</button>
```
JS
```javascript=
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 欄位「輸入的值」的確已經被更改為 "任意填入的值"

![](https://i.imgur.com/dI37ggU.png)

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

![](https://i.imgur.com/1RXP4aB.png)


**由此可知，修改 `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
```htmlembedded=
<select name="num" class="num">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
```
JS
```javascript=
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
```htmlembedded=
<input type="text" id="targetInput" value="200">
<button type="button" id="triggerBtn">觸發按鈕</button>
```
JS
```javascript=
const el = document.querySelector('#targetInput');
const triggerBtn = document.querySelector('#triggerBtn');

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

**進階題**

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

HTML
```htmlembedded=
<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
```javascript=
const selectPets = document.querySelector(".selectPets");
const choosePet = document.querySelector(".choosePet");
/* 程式碼撰寫 */
...
```


## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

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]() | 
-->