# 🏅 Day 20 - 表單取值觀念

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

### 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` 做型別轉換。**
parseInt 語法可將字串轉為數字型別，可參考[官方文件](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/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 19 有提到事件監聽內函式有一個參數（這邊以 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");
/* 程式碼撰寫 */
...

<!-- 解答：

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; // 寫法二
});
-->