前提・実現したいこと
発生している問題・エラーメッセージ
JavaScriptの学習でクイズを数問作ろうとし四択クイズを一問作るところまでできリファクタリングしようとして実行したのですがエラーがおきました。画像を載せられない状態なのでconsole.logのエラーの下線部分を載せます
< buttonLength) {
該当のソースコード
const question = 'ゲーム史上、最も売れたゲーム機は次のうちどれ?';
const answers = [
'スーパーファミコン',
'プレイステーション',
'ニンテンドースイッチ',
'ニンテンドーDS'
]
const correct = 'ニンテンドーDS';
const button = document.getElementsByTagName('button')
//クリック問題文、選択肢を定義
const setupQuiz = () => {
console.log(document.getElementById('js-question').textContent =question);
document.getElementById('js-question').textContent = question;
let buttonIndex = 0;
let buttonLength = button.length;
while(buttonIndex < buttonLength) {
button[buttonIndex].textContent = answers[buttonIndex];
buttonIndex++;
}
};
setupQuiz();
const clickHandler = (e) => {
if(correct === e.target.textContent){
window.alert('正解!');
}else{
window.alert('不正解!');
}
};
let handlerIndex = 0;
const buttonLength = button.length;
while (buttonIndex < buttonLength) {
button[handlerIndex].addEventListener('click', (e) => {
clickHandler(e);
});
handlerIndex++;
}
```html <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:title" content=""> <meta property="og:type" content=""> <meta property="og:url" content=""> <meta property="og:image" content=""> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="icon.png"> <!-- Place favicon.ico in the root directory --> <script src = "app.js"></script> </body> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <meta name="theme-color" content="#fafafa"> </head> <body> <div class="container"> <!-- Content here --> <!-- Add your site or application content here --> <p> </p> <div id="js-question" class="mt-3 alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="d-flex justify-content-center"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="ms-1 btn btn-primary">Primary</button> <button type="button" class="ms-1 btn btn-primary">Primary</button> <button type="button" class="ms-1 btn btn-primary">Primary</button> </div> </div> <script src = "app.js"></script> </body> </html>
試したこと
Vscodeでの確認、見本にした動画での見直し
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。