개발일지/JavaScript + jquery

JavaScript에서 value의 기능?

연습용365 2021. 11. 5. 01:36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div>
       이름 : <input type="text" id="name" /><br />
       지역 : 
       <select id="city">
           <option value="02">서울</option>
           <option value="032">인천</option>
       </select><br />
       <button onClick="ok();">제출</button>
   </div>
</body>
</html>

 

 

html 부분은 이렇게 만들어두고 value의 기능을 알아보도록 한다.

 

 

 

   <script>
       function ok()
       {
            alert(document.getElementById("name").value);
            alert(document.getElementById("city").value);
       }
   </script>

 

button 태그를 onClick 했을 때 실행되는 ok()메소드이다.

alert(경고)창이 뜨면서 내가 보고 싶은 정보를 띄우게 되는데 

 

document.getElementById("name").value

-문서 중 id가 name인 정보를 가지고 온다.

-여기서 value가 없다면 실행이 되지 않는데 그 이유는 사용자가 입력한 값이 들어오는 곳이기 때문!

-html 부분에서 value="" 이렇게 초기화를 해놓지 않아도 메소드에서 바로 사용가능

-결과적으로 name창에서 사용자가 입력한 이름이 경고창에 뜨게 되는 것이다~