來練練輸入吧。當熟悉抓 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  = ''
})