質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

クリックして回転させたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 155

utautai

score 5

クリックしたら回転などさせたいのですが、app.js:81 Uncaught TypeError: $button.addEventListener is not a function
at app.js:81と出てしまいます。コードは合ってるはずなのに、なぜ動かないのでしょうか?
質問下手ですみません泣
以下、scriptコード。

const quiz=[
{
question:'ゲーム市場もっとも売れたゲーム機は?',
answers:[
'スーファミ',
'プレイステーション2',
'任天堂スイッチ',
'任天堂DS',
],
correct:'任天堂DS',
},{
question:'循環小数は?',
answers:[
'12',
'1.2',
'二分の一',
'1.222....',
],
correct:'1.222....',
},{
question:'margin-left,margin-rightをautoにしても反映されない時の対処法は?',
answers:[
'Widthの限界値を広げる',
'泣く',
'消す',
'やり直し',
],
correct:'Widthの限界値を広げる',
},
];

const quizLength=quiz.length;
let quizIndex=0;
let score=0;

const $button=document.getElementsByTagName('button');
const buttonLength=$button.length;

// クイズの問題
const setupQuiz=()=>{
document.getElementById('js-question').textContent=quiz[quizIndex].question;
let buttonIndex=0;
let buttonLength=$button.length

while(buttonIndex<buttonLength){
$button[buttonIndex].textContent=quiz[quizIndex].answers[buttonIndex];
buttonIndex++;
}
}
setupQuiz();

const clickHandler=(e)=>{
if(quiz[quizIndex].correct===e.target.textContent){
window.alert('正解!!');
score++;
}else{
window.alert('残念!!不正解!');
}

quizIndex++;
if(quizIndex<quizLength){
setupQuiz();
}else{
window.alert('終了!!お疲れ様でした!貴方のスコアは'+score+'/'+quizLength+'です!!')
}
};
// ボタンクリックした時正誤判定

let handlerIndex=0;

while(handlerIndex<buttonLength){
$button[handlerIndex].addEventListener('click',(e)=>{
clickHandler(e);
$button.style.borderRadius = '50%';
});
handlerIndex++;
}

$button.addEventListener('click',()=>{
$button.style.borderRadius = '50%';
});

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2020/07/17 00:29

    (質問文は編集できます)質問文のJavaScriptはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • yambejp

    2020/07/17 10:16

    回転する部分だけ抽出して質問した方がよいです

    キャンセル

回答 1

checkベストアンサー

+1

>なぜ動かないのでしょうか?

const $button=document.getElementsByTagName('button');とあるので、入っているのはElementではなくて、HTMLCollectionです。

Document.getElementsByTagName() - Web API | MDN
HTMLCollection - Web API | MDN

HTMLCollection には addEventListener が使えないため、$button.addEventListenerでエラーになっています。


解決方法は、その直前の$button[handlerIndex].addEventListenerのように添え字をつけて使うことです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る