<body>
<input type="text" class="name-input" placeholder="이름을 입력하세요">
<button class="btn-submit">제출</button>
<div class="display-name"></div>
<body> const nameInput = document.querySelector('.name-input');
const displayName = document.querySelector('.display-name');
document.querySelector('.btn-submit').addEventListener('click', function () {
const name = nameInput.value; // 입력된 이름 가져오기
displayName.textContent = `안녕하세요, ${name}!`; // 이름 표시
nameInput.value = ''; // 입력 필드 초기화
});displayName을 화면에 출력하는 코드다.
즉, innerHTML하지않아도 textContent만으로 화면에 출력가능하다.
'부캠 > react_본캠프' 카테고리의 다른 글
| [주말]Counter만들기 (1) | 2024.10.27 |
|---|---|
| [주말]Color Flipper 만들기 (0) | 2024.10.27 |
| [reduce] (1) | 2024.10.26 |
| [Spread 및 Rest 연산자] (1) | 2024.10.26 |
| [구조분해할당] (0) | 2024.10.26 |