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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1620閲覧

JavaScriptでビンゴシートに機能を実装したい

KennyGoto

総合スコア1

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/14 09:12

編集2020/07/15 09:06

前提・実現したいこと

ドットインストール「JavaScriptでビンゴシートを作ろう!」にて作ったビンゴシートに以下の機能を実装しようとしています。
・数字をクリックするとクラス(opened)を追加し色が変わる。
・シャッッフルボタンをクリックすると数字をシャッフルする。
・「カードを決定する」ボタンをクリックするとシャッフルボタンが無効化される。

イメージ説明

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

ページ再読み込み後、数字をクリックすると色が変わるが、一度でもシャッフルしてしまうと数字の色が変わらなってしまいます。
何度シャッフルしてもクリックして色が変わるようにしたいのですが上手くいきません。

該当のソースコード

長くなってしまいますが全コードを追記させていただきました。

HTML

1<body> 2 <table> 3 <thead> 4 <tr><th>B</th><th>I</th><th>N</th><th>G</th><th>O</th></tr> 5 </thead> 6 <tbody> 7 8 </tbody> 9 </table> 10 11 <div id="refresh">カードをシャッフル</div> 12 13 <div id="lock">カードを決定する</div> 14 15 <script src="js/main.js"> 16 </script> 17</body>

CSS

1body { 2 font-family: 'Courier New' , monospace; 3 user-select: none; 4} 5 6table { 7 margin: 15px auto; 8} 9 10th, td { 11 width: 60px; 12 height: 60px; 13 text-align: center; 14 line-height: 60px; 15} 16th { 17 font-size: 24px; 18 font-weight: bold; 19} 20td { 21 background-color: orange; 22 border: 2px solid orange; 23 border-radius: 5px; 24 cursor: pointer; 25 transition: 0.5s; 26} 27 28.opened { 29 background-color: white; 30 border-radius: 50%; 31 transform: rotateX(360deg); 32} 33 34#refresh { 35 height: 40px; 36 width: 200px; 37 background-color: lightsalmon; 38 border-radius: 10px; 39 box-shadow: 0 5px salmon; 40 margin: 40px auto; 41 text-align: center; 42 line-height: 40px; 43 cursor: pointer; 44 user-select: none; 45} 46#refresh:hover { 47 opacity: 0.8; 48} 49#refresh:active { 50 transform: translate(0, 5px); 51 box-shadow: none; 52 opacity: 1; 53} 54 55#lock { 56 height: 40px; 57 width: 200px; 58 background-color: lightgreen; 59 border-radius: 10px; 60 margin: 20px auto; 61 text-align: center; 62 line-height: 40px; 63 cursor: pointer; 64 user-select: none; 65} 66 67.inactive { 68 opacity: 0.5 !important; 69 background-color: #777 !important; 70 box-shadow: 0 5px #444 !important; 71 pointer-events: none !important; 72} 73 74.active { 75 background-color: green !important; 76}

JavaScript

1'use strict'; 2 3{ 4 function createColumn(col) { 5 const source = []; 6 for (let i = 0; i < 15; i++){ 7 source[i] = i + 1 + 15 * col; 8 } 9 10 const column = []; 11 for (let i = 0; i < 5; i++){ 12 column[i] = source.splice (Math.floor(Math.random() * source.length), 1)[0]; 13 } 14 15 return column; 16 } 17 18 function createColumns(){ 19 const columns = []; 20 for (let i = 0; i < 5; i++){ 21 columns[i] = createColumn(i); 22 } 23 24 columns[2][2] = 'FREE'; 25 return columns; 26 } 27 28 function renderBingo(columns){ 29 const tbody = document.querySelector('tbody') 30 31 while(tbody.firstChild) { 32 tbody.removeChild(tbody.firstChild); 33 } 34 35 for (let row = 0; row < 5; row++){ 36 const tr = document.createElement('tr'); 37 for (let col = 0; col < 5; col++){ 38 const td = document.createElement('td'); 39 td.textContent = columns[col][row]; 40 tr.appendChild(td); 41 } 42 document.querySelector('tbody').appendChild(tr); 43 } 44 } 45 46 const columns = createColumns(); 47 renderBingo(columns); 48 49 50 const refresh = document.getElementById('refresh'); 51 const lock = document.getElementById('lock'); 52 53 refresh.addEventListener('click', () => { 54 const columns = createColumns(); 55 renderBingo(columns); 56 }); 57 58 lock.addEventListener('click', () => { 59 refresh.classList.toggle('inactive'); 60 lock.classList.toggle('active'); 61 if(lock.classList.contains('active') === true){ 62 lock.textContent = 'カードを変更する'; 63 }else{ 64 lock.textContent = 'カードを決定する'; 65 } 66 67 }); 68 69 const td = document.querySelectorAll('td'); 70 71 for (let i = 0; i < 25; i++) { 72 td[i].addEventListener('click', ()=>{ 73 td[i].classList.toggle('opened'); 74 }); 75 } 76}

試したこと

最初に表示されている25マスが[0]〜[24]で、1度シャッフルすると[25]〜[49]になってしまうのではないかと思い、for文内の i < 25 を i < 100 などに変更して、一度だけシャッフルしてみたが動作しませんでした。
コンソール上にエラーは表示されていません。

プログラミング学習を初めて2ヶ月ほどの初心者で無知ではありますが、よろしくお願い致します。

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

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

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

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

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

kei344

2020/07/14 13:01

書かれている状況が再現するコード(HTML/CSS/JavaScript)を質問文に追記されたほうが回答を得やすいと思います。※ コードはコードブロックで質問文に追記してください。コードブロックは ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答2

0

ベストアンサー

下記部分を関数renderBingoの最後に移動する。

js

1 const td = document.querySelectorAll('td'); 2 3 for (let i = 0; i < 25; i++) { 4 td[i].addEventListener('click', ()=>{ 5 td[i].classList.toggle('opened'); 6 }); 7 } 8```**動くサンプル:**[https://jsfiddle.net/eodnqktw/](https://jsfiddle.net/eodnqktw/)

投稿2020/07/15 15:16

kei344

総合スコア69364

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

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

KennyGoto

2020/07/18 23:56

上手く行きました! 全コードを載せた方がいいとご指摘も頂き、ありがとうございました。 はじめての質問でしたが本当に助かりました!
guest

0

javascript

1<style> 2#t1 th,#t1 td{ 3width:50px; 4height:50px; 5background-Color:orange; 6} 7</style> 8<script> 9const list={ 10b:new Array(15).fill(null).map((x,y)=>y+1), 11i:new Array(15).fill(null).map((x,y)=>y+16), 12n:new Array(15).fill(null).map((x,y)=>y+31), 13g:new Array(15).fill(null).map((x,y)=>y+46), 14o:new Array(15).fill(null).map((x,y)=>y+61), 15}; 16const shuffle=()=>{ 17 ["b","i","n","g","o"].forEach(x=>{ 18 list[x]=list[x].map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]); 19 }); 20} 21const setText=()=>{ 22 const cells=document.querySelectorAll('#t1 td'); 23 for(var i=0;i<5;i++){ 24 cells[i*5 ].textContent=list.b[i]; 25 cells[i*5+1].textContent=list.i[i]; 26 cells[i*5+2].textContent=i==2?"Free":list.n[i]; 27 cells[i*5+3].textContent=list.g[i]; 28 cells[i*5+4].textContent=list.o[i]; 29 } 30} 31window.addEventListener('DOMContentLoaded', ()=>{ 32 shuffle(); 33 setText(); 34 document.querySelector('#shuffle').addEventListener('click',()=>{ 35 shuffle(); 36 setText(); 37 }); 38 document.querySelector('#determine').addEventListener('click',()=>{ 39 document.querySelector('#shuffle').disabled=true; 40 }); 41}); 42 43</script> 44<table id="t1"> 45<thead> 46<tr> 47<th>B</th> 48<th>I</th> 49<th>N</th> 50<th>G</th> 51<th>O</th> 52</tr> 53</thead> 54<tbody> 55<tr> 56<td></td> 57<td></td> 58<td></td> 59<td></td> 60<td></td> 61</tr> 62<tr> 63<td></td> 64<td></td> 65<td></td> 66<td></td> 67<td></td> 68</tr> 69<tr> 70<td></td> 71<td></td> 72<td></td> 73<td></td> 74<td></td> 75</tr> 76<tr> 77<td></td> 78<td></td> 79<td></td> 80<td></td> 81<td></td> 82</tr> 83<tr> 84<td></td> 85<td></td> 86<td></td> 87<td></td> 88<td></td> 89</tr> 90</tbody> 91</table> 92<button id="shuffle">カードをシャッフル</button> 93<button id="determine">カードを決定</button> 94

投稿2020/07/14 15:38

yambejp

総合スコア114572

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

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

KennyGoto

2020/07/18 23:58

ご回答ありがとうございました! 早々にご回答を頂いていたのにコメントが遅くなり、申し訳ございません。 こちらを参考にさせて頂き、ステップアップして行けるよう頑張ります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問