더북(TheBook)

초기 화면에서 주인공 이름을 입력하고 시작 버튼을 클릭하면 일반 메뉴(#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>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.