Q&A
ブラウザの開発者ツールのコンソールにエラーが出ていませんか?
エラーが出ていたら、質問文に追記してください。
前提・実現したいこと
HTMLでサイトを作っているのですが、buttonを押しても何も起きません。
中の文章をdivで囲うなど、色々試しましたができませんでした。
発生している問題・エラーメッセージ
addEventListenerがfunctionではないというエラーが出ていました。
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="style.css"> 6 <title> 7 お知らせ 8 </title> 9 </head> 10 <body> 11 <p><a href="../index.html" class="back">TOPに戻る</a></p> 12 <p class="title" id="title">運営からの大事なお知らせ</p> 13 <p class="announce">新しいお知らせが上にくるよ(ﾟ∀ﾟ)</p> 14 <input id="pass"> 15 <button><div class="toukoub">投稿</div></button> 16 <p class="announce-text" id="announce"></p> 17 <p class="osuna">aaaa</p> 18 <small class="copyright">©ゆーりん 2021 煽れよちゅぎちゅん作成委員会 inc.</small> 19 <script src=" index.js"></script> 20 </body> 21</html>
javascript
1window.addEventListener('load', function() { 2 const osuna = document.querySelector('.toukoub'); 3 osuna.addEventListener('click', function() { 4 alert('done'); 5 }) 6})
直したあとのものです
試したこと
上にも書いたように、div要素で囲うなどしてみました。
回答2件
0
ベストアンサー
javascript
1const osuna = document.getElementByClassName('toukoub'); 2↓↓↓ 3const osuna = document.getElementsByClassName('toukoub')[0]; 4もしくは 5const osuna = document.querySelector('.toukoub');
※getElementByClassNameはファンクション名がtypo
さらにHTMLCollectionをつかむので先頭を抜き出す必要があります。
もし複数個ボタンがあるならさらに工夫が必要
全体像
javascript
1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const osuna = document.querySelector('.toukoub'); 4 osuna.addEventListener('click',()=>{ 5 osuna.textContent = "押すなって、、、"; 6 }); 7}); 8</script> 9<p><a href="../index.html" class="back">TOPに戻る</a></p> 10<p class="title" id="title">運営からの大事なお知らせ</p> 11<p class="announce">新しいお知らせが上にくるよ(ﾟ∀ﾟ)</p> 12<input id="pass"> 13<button><div class="toukoub">投稿</div></button> 14<p class="announce-text" id="announce"></p> 15<small class="copyright">cゆーりん 2021 煽れよちゅぎちゅん作成委員会 inc.</small>
投稿2021/10/26 02:36
編集2021/10/26 02:49
総合スコア115012
0
javascript
1const osuna = document.getElementByClassName('toukoub')
「getElementsByClassName」ですよ？
Document.getElementsByClassName() - MDN
そのうえで、取得できるのは配列的なものなので、
javascript
1const osuna = document.getElementsByClassName('toukoub')[0]
とかにするとよいのでは？
投稿2021/10/26 02:32
総合スコア5572
あなたの回答
tips
プレビュー
