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

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

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

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

Q&A

解決済

3回答

1581閲覧

任意で生成した複数のボタンに対して、クリックごとに文字と色を変更させる方法

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2019/10/03 23:04

はじめまして。現在、javascriptの勉強をしております。はじめて、質問をさせていただきますが、よろしくお願いいたします。

作ろうとしているもの

下記の様な動作をするモノを作っております。

1:はじめに、任意のボタンの数を入力

2:ボタンをクリックする度に下記の条件として考えています。
・文字が変更(1~5)初期値は0
・ボタンの色を変更
・繰り返し使える(1~5)0は除外
・それぞれのボタンが独立して、上記3つの動作が出来る

発生している問題・エラーメッセージ

1:で任意のボタンを生成させ、1つめのボタンは期待値通りの動作をするのですが、それ以降に生成したボタンが反応しません。

Chromeのデベロッパーツールのコンソールで見てもエラーが出ておらず
各ボタン生成時に、IDに対してID数字のようにつけていって、個々のボタンに対して、繰り返し処理といった様な考えあったのですが、実装方法がわからず、次に進めない状態です。

該当のソースコード

HTML,CSS,Javascriptの3つをまとめたコードが下記になります。

<html> <body> <style> .html, .body{ font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif; } .button{ width:200px; height:80px; border:1px solid #f1f1f1; outline:none; background: #95a5a6; } .status{ font-size:24px; font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif; font-weight:500; color:white; } </style> <div class="content"> <div id="parent"> <div id="child" class="cl"> </div> </div> </div> <script> window.addEventListener('DOMContentLoaded', function(){ let seat = prompt("ボタン数を入力してください"); for (i=0; i<seat; i++){ let elem = document.createElement('div'); elem.id = 'child'; elem.className = 'parent'; elem.innerHTML = '<button type="button" id="tap" class="button"><span class="status">0</span></button>'; let parent = document.getElementById('parent'); parent.appendChild(elem); }}, false) document.addEventListener('click', function(i){ let tap=document.getElementById('tap'); tap.style.backgroundcolor='#95a5a6'; tap.dataset['color']='#95a5a6'; tap.addEventListener('click',function(){ switch(tap.dataset['color']){ case '#e74c3c': tap.style.backgroundColor='#3498db'; tap.dataset['color']='#3498db'; tap.querySelector('span').textContent='2'; break; case '#3498db': tap.style.backgroundColor='#2ecc71'; tap.dataset['color']='#2ecc71'; tap.querySelector('span').textContent='3'; break; case '#2ecc71': tap.style.backgroundColor='#f1c40f'; tap.dataset['color']='#f1c40f'; tap.querySelector('span').textContent='4'; break; case '#f1c40f': tap.style.backgroundColor='#95a5a6'; tap.dataset['color']='#95a5a6'; tap.querySelector('span').textContent='5'; break; default: tap.style.backgroundColor='#e74c3c'; tap.dataset['color']='#e74c3c'; tap.querySelector('span').textContent='1'; break; } }); },false); </script> </body> </html>

補足情報(FW/ツールのバージョンなど)

Windows10
Chrome:バージョン: 77.0.3865.90(Official Build) (64 ビット)
VisualStudioCode

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

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

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

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

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

kyoya0819

2019/10/03 23:47

文字は0->1->2->3->4->5->1->2..ということでいいのでしょうか?
退会済みユーザー

退会済みユーザー

2019/10/03 23:56

asuchi0819様 ご質問いただき、ありがとうございます。 はい。ご指摘の通り、0は初回のみで、5からは1に戻り、繰り返すものを想定しております。
guest

回答3

0

JavaScript

1 document.addEventListener('click', function(i){ 2 //let tap=document.getElementById('tap'); 3 let tap = i.target.closest('button.button'); 4 if (!tap) { 5 return true; 6 } 7 8 //tap.style.backgroundcolor='#95a5a6'; 9 //tap.dataset['color']='#95a5a6'; 10 //tap.addEventListener('click',function(){ // 後ろも

色を直接持たせるとわかりにくいので CSS に任せたほうがいいでしょう。

投稿2019/10/04 03:01

x_x

総合スコア13749

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

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

0

for文で同じidを複数回振っているのはNGです

投稿2019/10/04 00:29

yambejp

総合スコア114581

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

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

0

ベストアンサー

ご回答いただいた皆様、ご覧いただいた皆様
ありがとうございました。

出来るだけきれいなコード、自動でと考えていたのですが
自分の中での期限もきたため、本質問は、手間ではあるのですが、
一つ一つのボタンにiDを振り、そのIDに対して、switch条件を付けることで
解決とさせていただきます。

ありがとうございました。

投稿2019/10/07 22:08

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問