이벤트 리스너를 공부하는 중에 예전에 분명 input 값을 가져와서 사용하는 방법이 있었던 거 같은데 하면서 뒤적거리다가 드디어 찾아냈다. 다시 안까먹게 적어둬야지. 이벤트도 정리해둬야 하고... 왜 이렇게 할 일이 밀려있지
사용자가 입력을 완료한 input 값을 출력하기
결론부터 말하면 input.value를 사용하면 된다. 아래 예제를 통해 이해하자. 텍스트를 입력하면 제목 태그를 변경하고 input의 텍스트를 비우는 예제이다. + 텍스트를 입력하지 않았다면 아무 일이 일어나지 않도록 할 것
<body>
<h1>안녕하세요</h1>
<input type="text">
<button id="bu">클릭!</button>
</body>
<script>
const input = document.querySelector('input');
const button = document.querySelector('#bu');
const h2 = document.querySelector('h2');
function innerText(event){
if (input.value) {
h2.innerText = input.value;
input.value = '';
}
}
button.addEventListener('click', innerText);
</script>입력 칸에 응애를 치면 안녕하세요가 응애로 바뀌고 입력창은 빈 칸으로 바뀐다.
'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] lodash 라이브러리 (0) | 2023.04.04 |
|---|---|
| [JavaScript] 새로고침 방지 (event.preventDefault()) (0) | 2023.02.10 |
| [JavaScript] 구조분해할당 (0) | 2023.02.08 |
| [JavaScript] switch문 범위 주는 방법 (0) | 2023.02.01 |
| [Javascript] 연산자 (0) | 2022.12.26 |
