초기 화면에서 주인공 이름을 입력하고 시작 버튼을 클릭하면 일반 메뉴(#game-menu) 화면으로 전환되어야 합니다. 이를 위해 style 속성을 조작해 초기 화면을 숨기고(display: none) 일반 메뉴 화면을 보이게(display: block) 설정합니다.
<script>
const $startScreen = document.querySelector('#start-screen'); // 초기 화면
const $gameMenu = document.querySelector('#game-menu'); // 일반 메뉴 화면
const $battleMenu = document.querySelector('#battle-menu'); // 전투 메뉴 화면
const $heroName = document.querySelector('#hero-name'); // 주인공 이름
$startScreen.addEventListener('submit', (event) => {
event.preventDefault();
const name = event.target['name-input'].value;
$startScreen.style.display = 'none'; // 초기 화면 숨기기
$gameMenu.style.display = 'block'; // 일반 메뉴 화면 보이기
$heroName.textContent = name;
});
</script>