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

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

新規登録して質問してみよう
ただいま回答率
85.50%
onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

button

HTMLで用いる<button>タグです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1800閲覧

onclickが効かない

bob-kitchin

総合スコア11

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

button

HTMLで用いる<button>タグです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/09/07 05:42

前提・実現したいこと

onclickを使用して要素の表示、非表示を切り替えたいのですが、クリックしても何も起こりません。
console.logを使用して検証した結果、button-d(HTMLの99~102行目)もonclickの動作も取得できていました。
addEventListenerも試してみましたが、定数のbuttonが単一ノードではないため使用できませんでした。
改善策をよろしくお願いします。

該当のソースコード

HTML

1<!doctype html> 2<html class="no-js" lang=""> 3 4<head> 5 <meta charset="utf-8"> 6 <title></title> 7 <meta name="description" content=""> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 10 <meta property="og:title" content=""> 11 <meta property="og:type" content=""> 12 <meta property="og:url" content=""> 13 <meta property="og:image" content=""> 14 15 <link rel="manifest" href="site.webmanifest"> 16 <link rel="apple-touch-icon" href="icon.png"> 17 <!-- Place favicon.ico in the root directory --> 18 19 <!-- CSS only --> 20<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"> 21 22 <meta name="theme-color" content="#fafafa"> 23 24</head> 25<body> 26 27 <style> 28 29 .container{ 30 margin-right: auto; 31 margin-left: auto; 32 max-width: 700px; 33 34 background-image:url(haikei.png); 35 background-size:cover; 36 background-position:center center; 37 background-repeat: no-repeat; 38 object-fit: cover; 39 position: relative; 40 } 41 42 .question{ 43 text-align:center; 44 position:absolute; 45 border: solid 2px gray; 46 } 47 48 .fixed-bottom{ 49 margin: 0; 50 position:absolute; 51 text-align:center; 52 } 53 54 .answer{ 55 border: solid 2px gray; 56 } 57 58 .smile{ 59 position: absolute; 60 animation: 61 name1 3s step-end 0s infinite normal; 62 z-index: 2; 63 } 64 65 .sleep{ 66 position: absolute; 67 z-index: 1; 68 } 69 70 @keyframes name1{ 71 0%{ opacity:1; } 72 73 35%{ opacity:0; } 74 75 40%{ opacity:1; } 76 77 80%{ opacity:0; } 78 79 85%{ opacity:1; } 80 81 95%{ opacity:0; } 82 83 100%{ opacity:1; } 84 } 85 86 </style> 87 88<div class="p-4"> 89</div><!---- space --> 90 91 <div id="top"class="container mt-5 py-5 px-0"> 92 93 <div id="question" class="row justify-content-center"> 94 <div class="question fixed-top">問題文</div> 95 </div><!---- question --> 96 97 <div class="row flex-column d-flex align-items-center justify-content-center" style="margin:0;"> 98 <h1 class="col-3 text-center mb-5">クイズ</h1> 99 <button type="button" class="button-d col-2 btn btn-primary mb-3 w-25">初級</button> 100 <button type="button" class="button-d col-2 ml-1 btn btn-primary mb-3 w-25">中級</button> 101 <button type="button" class="button-d col-2 ml-1 btn btn-primary mb-3 w-25">上級</button> 102 <button type="button" class="button-d col-2 ml-1 btn btn-primary w-25">冥府級</button> 103 </div> <!---- difficulty level --> 104 105 <div id="answer"class="row fixed-bottom flex-row row-cols-2 justify-content-center"> 106 <div type="button" class="answer col py-2 px-0">選択肢1</div> 107 <div type="button" class="answer col py-2 px-0">選択肢2</div> 108 <div type="button" class="answer col py-2 px-0">選択肢3</div> 109 <div type="button" class="answer col py-2 px-0">選択肢4</div> 110 </div> <!---- answer --> 111 112 <img class="smile position-absolute bottom-0 start-0" src="smile.png" alt=""> 113 114 <img class="sleep position-absolute bottom-0 start-0" src="sleep.png" alt=""> 115 116 </div><!---- container --> 117 118 <script src="quiz.js"></script> 119 120</body> 121 122</html>

JavaScript

1const question=document.getElementById("question") 2const answer=document.getElementById("answer") 3const button=document.getElementsByClassName("button-d") 4 5const questionOriginal=question.style.visibility; 6const answerOriginal=answer.style.visibility; 7 8question.style.visibility = "hidden"; 9answer.style.visibility = "hidden"; 10 11 12button.onclick = function() { 13 button.style.visibility ="hidden"; 14 question.style.visibility=questionOriginal; 15 answer.style.visibility=answerOriginal; 16 };

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

addEventListenerも試してみましたが、定数のbuttonが単一ノードではないため使用できませんでした。

同様に、onclickも(代入はできてしまいますが)コレクションに対して動作はしません

「コレクションをループで回して1つ1つイベントをセットする」あるいは「上位のHTMLエレメントで、バブリングしてくるイベントを回収する」のどちらかの方法で対応してください。

投稿2021/09/07 05:47

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bob-kitchin

2021/09/07 06:20 編集

回答ありがとうございます。 ```button-d```の親要素を取得して試したところ、無事に処理が行われました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問