<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이 되지 않을 수 있다.
'Front-end > Javascript' 카테고리의 다른 글
[JS] Javascript에서 Enum 사용하기 (0) | 2022.08.19 |
---|---|
[JS] 올림, 반올림, 내림 (ceil, round, floor) / 특정 자리수까지 0 채우기 (0) | 2022.08.08 |
[JS] prototype 참고글 (0) | 2021.09.26 |
[JS] String 오브젝트에 굳이 toString()이 있는 이유 (0) | 2021.09.25 |
[JS] undefined와 null의 차이 (0) | 2021.09.23 |