JS 搜尋(把資料寫進JS內) 和HTML做連結 和強制大寫

JAVASCRIPT 搜尋 強制大寫

目的

我想要把員工號碼輸入框框內按下submit

然後比對我的資訊 var information｛｝

若是員工號碼有在資訊裡的話就在頁面輸出資訊裡面的姓名

遇到的問題

1.就算我輸入的原碼有在資訊框內頁面還是會印出 else 不存在的結果(疑似if出錯)

2.<p>${information[key].value}</p2>這行沒有辦法讀出資訊欄內的值

改善後

  • 1. 用console.log(key,userInput) 去DEBUG 發現 var userinput = document.getElementById(“userinput”);

是一個元素並不是值 所以if(key ==user input)改成if(key ==user input.value)

  • 2.<p>${information[key].value}</p2> 這行 {information[key] } 本身就是值

所以去掉value <p>${information[key]}</p2>

  • 3.最後希望使用者強制輸入大寫

這樣就不會有輸入小寫卻不符合的問題

</div>
    <script>
var userinput = document.getElementById(“userinput”);

userinput.onkeyup = function(){    

this.value = this.value.toUpperCase();}

程式碼

<!DOCTYPE html>

<html>    

<head>        

<meta charset=”utf-8″>           

 <title>NUMBER</title>           

 </head>
    <body>        

<h1>NUMBER</h1>            

<p>NAME</p>                

<input type=”text” id=”userinput”>                

<button id=”btn”>submit</button>                

<div id=”list”>                

<div class=”article”>                   

 <h2></h2>                   

 <p></p>                

</div>
    <script>
var userinput = document.getElementById(“userinput”);

userinput.onkeyup = function(){    

this.value = this.value.toUpperCase();}

var btn = document.getElementById(“btn”)var list = document.getElementById(“list”)

var information = {    “A01″ :”Sandy”,    “A02″ :”Ammy”,    “A03″ :”Jhon”,    “A04″ :”Mini”,    “A05″ :”Ben”,    “A06″ :”Susan”,    “A07″ :”Jhony”,    “A08″ :”Kenny”,};

btn.addEventListener(“click”,function(){    var input_in_information = false;    

for (var key in information){        

if ([key] == userinput.value){            

input_in_information = true;        

break;        }    }   

 if(input_in_information){    list.innerHTML = list.innerHTML +`    <div class =”article”>    

<h2>${userinput.value}</h2>    

<p>${information[key]}</p2>   

 </div>    `;    

userinput.value = “”    }

else{    list.innerHTML = list.innerHTML +`    

<div class =”article”>   

 <h2>${userinput.value</h2>    

<p>NO DATA</p2>    

</div>     `;     

userinput.value = “”    }})    
  </script>    

</body>

</html> 

執行結果