iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
0

來練練輸入吧。當熟悉抓 element 裡面的值之後,就可以把「輸入」拆解成「監聽事件觸發」加上「抓取值」。input 就是一個盒子,當事件觸發的時候,動手去拿裡面的東西。然後清空裡面的東西,才不會盒子看起來髒髒的。

說明:
最簡易的用兩個 HTML tag,包括 input 與 button (甚至只用一個 input ,按 enter 觸發,但記得考慮手機可能會不方便觸發輸入)

<h1>有沒有這項蘋果的產品</h1>
<input class="insert" type="text" placeholder="現在搜尋">
<button class="showData">Action</button>

說明:
input 的初始設定 place holder 是靠左,且字是與邊框貼齊的,所以我們會使用 text-align 與 padding 去調整文字位置與空出與邊空的距離。

input {
  margin: 10px;
  padding-right: 5px;
  height: 15px;
  text-align: right;
}

說明:
這裡用一個 array 來暫時紀錄 apple 產品包含的資料,實際資料也可以是接 api 的 資料庫、瀏覽器的 localstorage 或 cookie 。於是當我們輸入的時候,用 includes 去搜尋陣列,回傳 true or false,來判斷是否有這個值。

var apples = ['手機', '電腦', '滑鼠', '支付', '電視', '音響'];

document.getElementsByClassName("showData")[0].addEventListener('click', function(){
  var insert = document.getElementsByClassName("insert")[0]
  var result = apples.includes(insert.value)
  if (result) {
    alert("有喔有喔");
  } else {
    alert("等你發明");
  }
  insert.value  = ''
})


上一篇
一個 JS 學習者的日常 day 24
下一篇
一個 JS 學習者的日常 day 26
系列文
一個 JS 學習者的日常28

尚未有邦友留言

立即登入留言