[JS] onInput 이벤트 - 입력한 글자 실시간으로 화면에 출력하기

<input type="text" id="input"> 결과: <span id="result"></span>

const input = document.getElementById('input');
const result = document.getElementById('result');
input.oninput = function() {
    result.innerHTML = input.value;
};

 

1. document.getElementById('id')로 엘리먼트를 선택하고,

2. oninput 이벤트를 할당해준다.

3. result.innerHTML = input.value

- input.value 값을 id="result"인 엘리먼트에 설정해준다.

 

body의 끝 부분에 <script>를 위치시키거나 js 파일을 로드한다면 defer를 붙여 불러야 엘리먼트를 가져올 때 null이 되지 않을 수 있다.