8-2 QUIZ 전광판 만들기

✅ 퀴즈 : 전광판 만들기

이번에는 자신의 아이디를 출력하는 전광판을 만들어 봅시다!

버튼을 클릭할 때 마다 출력되는 글자가 하나씩 늘어나도록 코드를 구성 해 주세요.

HTML

<div class="container">
        <button class="btn_display">전광판 버튼</button>
        <h1 class="display"></h1>
    </div>

JS

let content = '나는짱이다!';
let count = 0;
let colorCode;
let plus = content.split('')

const btnDisplay = document.querySelector('.btn_display');
const Display = document.querySelector('.display');


btnDisplay.addEventListener('click',()=>{
  if( count < plus.length ){
    Display.innerText += plus[count];
    colorCode = "#" + Math.floor(Math.random() * 0xffffff).toString(16);
    Display.style.color = colorCode;
    count++;
  }else{
    Display.innerText = '';
    count = 0;
  }
})

버튼을 클릭할 때 마다 출력되는 글자가 하나씩 늘어나고 색이 랜덤으로 변하게 설정함!