8-2 QUIZライトパネルの作成

2374 ワード

試験:スクリーンの作成
今回は自分のIDを出力する電光掲示板を作ろう!
ボタンをクリックするたびに出力される文字が1つ増えるようにコードを設定してください.
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;
  }
})
ボタンをクリックするたびに、出力されるテキストが1つ増え、色がランダムに設定されます.