input태그
아래의 html코드를 작성해, input태그를 작성해주겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>form-test</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="main">
<input id="input" type="text"/>
</div>
<script src="ex.js"></script>
</body>
</html>그리고 ex.js에 dom api를 사용해 input요소를 inputElement 변수에 담아보겠습니다.
const inputElement = document.getElementById("input");
console.log(inputElement);
addEventListener를 사용해 inputElement에 마우스를 올리면, 이 inputElement에 작성된 값을 가져오는 코드를 작성해보겠습니다.
const inputElement = document.getElementById("input");
inputElement.addEventListener("mouseover",()=>{
console.log(inputElement.value);
})javascrip를 입력하고 마우스를 올려보면
console탭에 단어가 출력되는 것을 볼 수 있습니다.
자바스크립트에서 특정 값을 입력받는 input요소를 사용할 때에는, 이렇게 간단하게 입력된 값을 가져올 수 있습니다.
이번에는 select태그를 사용해보겠습니다.
select태그는 드롭다운 형태로 원하는 항목을 선택할 수 있는 입력폼입니다.
<!DOCTYPE html>
<html>
<head>
<title>form-test</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="main">
<select id="color">
<option>노랑</option>
<option>초록</option>
<option>파랑</option>
<option>보라</option>
</select>
</div>
<script src="./index.js"></script>
</body>
</html>
마찬가지로 getElementById를 사용해 select요소를 가져온 다음, select 요소의 값이 변경되었을 때,
변경된 값을 출력하는 코드를 작성해보겠습니다.
const selectElement = document.getElementById("color");
selectElement.addEventListener("change", ()=>{
console.log(selectElement.value);
})
초록을 선택한경우
파랑을 선택한경우
이번에는 select 태그아래에, div 태그의 텍스트로, 현재 선택 된 값을 표시하는 코드를 작성해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>form-test</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="main">
<select id="color">
<option>노랑</option>
<option>초록</option>
<option>파랑</option>
<option>보라</option>
</select>
<div id="result">노랑</div>
</div>
<script src="ex.js"></script>
</body>
</html>ex.js에서 id가 result인 요소를 resultElement변수에 저장한 다음, selectElement의 값이
변경될 때마다, 이 resultElement의 텍스트를 변경된 값으로 설정해주겠습니다.
const selectElement = document.getElementById("color");
const resultElement = document.getElementById("result");
selectElement.addEventListener("change", ()=>{
resultElement.textContent=selectElement.value;
})
실행화면입니다.
드롭다운의 값을 변경해보면, 값이 변경되는 즉시 div요소의 텍스트도 동일한 값으로 변경됩니다.
참고자료
웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의
웹 프론트엔드 개발자를 희망한다면? 친절하고 꼼꼼한 자바스크립트 강의로 첫걸음을 내딛어보세요✨, - 강의 소개 | 인프런
www.inflearn.com
'프론트엔드 > javascript' 카테고리의 다른 글
| javascript - 1.크롬시작화면만들기 (0) | 2023.06.10 |
|---|---|
| javascript - localStorage로 데이터 저장 (0) | 2023.06.08 |
| javascript - Date 객체와 날짜 (0) | 2023.06.05 |
| javascript - DOM API -2 (0) | 2023.06.04 |
| javascript - DOM API-1 (0) | 2023.06.04 |
