前提・実現したいこと
ここに質問の内容を詳しく書いてください。
クイズアプリを作ろうとしているのですが、addEventLisnerを使うと何故かエラーが出てしまいます。エラー内容はapp.js:17 Uncaught TypeError: document.getElementsByTagName(...)[0].addEventLisner is not a function
at app.js:17と出ており、クリックしてもaddEventLinsnerが機能しません。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
index.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"> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="icon.png"> <!-- Place favicon.ico in the root directory --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <meta name="theme-color" content="#fafafa"> </head> <body> <div class="container"> <div id="js-question" class="mt-3 alert—primary" role="alert"> A simple primary alert-check it out! </div> <div class="d-flex justify-content-center"> <button type="button" class="btn-primary">Primary</button> <button type="button" class="ml-1 btn btn-primary">Primary</button> <button type="button" class="ml-1 btn btn-primary">Primary</button> <button type="button" class="ml-1 btn btn-primary">Primary</button> </div> </div> <script src="app.js"></script> </body> </html>app.js
const question ='ゲーム市場、最も売れたゲーム機は次の内どれ?';
const answers = [
'スーパーファミコン',
'プレーステーション2',
'ニンテンドースイッチ',
'ニンテンドーDS'
];
const correct ='ニンテンドーDS';
console.log(document.getElementById('js-question').textContent=question)
document.getElementsByTagName('button')[0].textContent=answers[0];
document.getElementsByTagName('button')[1].textContent=answers[1];
document.getElementsByTagName('button')[2].textContent=answers[2];
document.getElementsByTagName('button')[3].textContent=answers[3];
document.getElementsByTagName('button')[0].addEventLisner('click', ()=>{
if(correct=== document.getElementsByTagName('button')[0].textContent){
window.alert('正解!');
}else{
window.alert('不正解!');
}
});
ソースコード ### 試したこと アロー関数をfunctionにコードを書き換えてみましたが効果はありませんでした。 ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー