表單取值的誤區

誤區一：忘記將表單中取出的「數字」由字串轉為數字

從 input 中取出的值為「字串」，就算 type=number 取出來的值也是字串，不是數字。

在JS直播班第五周的作業，我就犯了這樣的錯誤。

<input type="number" id="targetInput" value='123'>
<button id="btn">觸發按鈕</button>

原本的 el.value 顯示為 string，要透過 parseInt之後才會轉為數字。

let el = document.querySelector("#targetInput");
let btn = document.querySelector("#btn");

btn.addEventListener("click", function () {
  console.log(el.value);
  //"123" 甚麼都不輸入的話，輸出預設值
  console.log(typeof el.value);
  //"string"
  let newValue = parseInt(el.value);
  console.log(typeof newValue);
  //"number"
});

誤區二：.value, .getAttribute('value') 兩者大不同

這一點是我之前沒有思考過的問題。

在這個例子中，當我們做表單取值的時候，必須把 id 為 "targetInput"的表單元素綁訂到 el 這個變數上。然後利用 el.value去取值。

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

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

firstBtn.addEventListener('click', function(){
  //輸入框填入任何值都會被 "任意填入的值" 取代
    el.value = "任意填入的值";
    console.log(`el.value: ${el.value}`);
    //"任意填入的值"
})

但是使用 .getAttribute('value') 也能取到 input 元素 value 屬性的值，那 .value 和 .getAttribute('value') 有甚麼差別呢？

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

firstBtn.addEventListener("click", function () {
  //輸入框填入任何值都會被 "任意填入的值" 取代
  el.value = "任意填入的值";
  console.log(`el.value: ${el.value}`);
  //"el.value: 任意填入的值"
  let getValue = el.getAttribute("value");
  //getAttribute 取到的是 input 的預設值 ，而非 user 輸入的值
  console.log(getValue);
    //"123"
});

el.value 會去捉取表單輸入的值，如果沒有輸入的話，就會去捉預設值。而 .getAttribute('value') 則不管使用者輸入甚麼，都會去捉預設值，而要改變預設值的話必須使用 el.setAttribute('value', '456')。

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

firstBtn.addEventListener("click", function () {
  //輸入框填入任何值都會被 "任意填入的值" 取代
  el.value = "任意填入的值";
  console.log(`el.value: ${el.value}`);
  //"el.value: 任意填入的值"
  el.setAttribute('value', '456')
  let getValue = el.getAttribute("value");
  //getAttribute 取到的是 input 的預設值 ，而非 user 輸入的值
  console.log(getValue);
  // "456"
});

所以結論是表單取值不能使用 el.getAttribute("value")。

六角學院助教的提醒：

• el.value 對應的是 input 欄位目前「輸入的值」
• el.getAttribute(‘value’) 對應的是 input 欄位的「預設屬性值」
• 修改 el.value 並不會影響 input 標籤的 value 預設屬性，使用 setAttribute() 才會。

真的每天都要花時間做每日任務，常常會發現自己不懂的地方。

誤區三： el.value 不等於 e.target.value

今天看每日任務的時候有一瞬間被混淆了。

e.target.value 的 e 是事件監聽的事件物件，例如滑鼠點擊按鈕時會產生一個事件物件，e.target.value 是點擊事件所帶的資訊。

el.value 則是我們綁定表單元素，當輸入資訊時就會夾帶在 value 上。
兩者並不相同。

今天的每日任務 。