Q&A
### セルに数字を表示させる。
一つ一つのセルにランダムに1~81の数字を一つ表示させる。
一度出た数字は他のセルに二度と現れないようにする。
セルに意図しない挙動で数字が現れる。
①1回目以降にセルをクリックするとなぜか配列が現れ、二つ以上の数字がセルに陳列する問題。 →3,4回と押すごとに一つずつ配列が追加されてしまう。 ②一度表示された数字が1回目以降もセルに表示される問題。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>test</title> 9 <link rel="stylesheet" href="style.css"> 10</head> 11 12<body> 13 <table> 14 <tr> 15 <td></td> 16 <td></td> 17 <td></td> 18 <td></td> 19 <td></td> 20 <td></td> 21 <td></td> 22 <td></td> 23 <td></td> 24 </tr> 25 <tr> 26 <td></td> 27 <td></td> 28 <td></td> 29 <td></td> 30 <td></td> 31 <td></td> 32 <td></td> 33 <td></td> 34 <td></td> 35 </tr> 36 <tr> 37 <td></td> 38 <td></td> 39 <td></td> 40 <td></td> 41 <td></td> 42 <td></td> 43 <td></td> 44 <td></td> 45 <td></td> 46 </tr> 47 <tr> 48 <td></td> 49 <td></td> 50 <td></td> 51 <td></td> 52 <td></td> 53 <td></td> 54 <td></td> 55 <td></td> 56 <td></td> 57 </tr> 58 <tr> 59 <td></td> 60 <td></td> 61 <td></td> 62 <td></td> 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 <td></td> 76 <td></td> 77 <td></td> 78 <td></td> 79 </tr> 80 <tr> 81 <td></td> 82 <td></td> 83 <td></td> 84 <td></td> 85 <td></td> 86 <td></td> 87 <td></td> 88 <td></td> 89 <td></td> 90 </tr> 91 <tr> 92 <td></td> 93 <td></td> 94 <td></td> 95 <td></td> 96 <td></td> 97 <td></td> 98 <td></td> 99 <td></td> 100 <td></td> 101 </tr> 102 <tr> 103 <td></td> 104 <td></td> 105 <td></td> 106 <td></td> 107 <td></td> 108 <td></td> 109 <td></td> 110 <td></td> 111 <td></td> 112 </tr> 113 </table> 114 <script src="script.js"></script> 115</body> 116 117</html>
css
1* { 2 padding: 0; 3 margin: 0; 4} 5 6html { 7 font-size: 62.5%; 8} 9 10td { 11 /* padding: 3rem; */ 12 width: 60px; 13 height: 60px; 14 text-align: center; 15 font-size: 1.6rem; 16 cursor: pointer; 17 border: 1px solid #000; 18 transition: .3s; 19} 20 21td:hover { 22 background-color: #efefef; 23}
js
1// const mass = document.querySelectorAll('td'); 2// const massOne = mass.forEach(c => { 3// c.addEventListener('click', function () { 4// if (c.textContent == '') { 5// this.textContent = createNumber(1, 81); 6// } else { 7// alert('すでに選択済みです。'); 8// } 9// }); 10// }); 11 12// function createNumber(min, max) { 13// return Math.floor(Math.random() * (max - min)) + min; 14// }; 15 16// var randoms = []; 17// var minT = 1, maxT = 81; 18 19// for (i = minT; i <= maxT; i++) { 20// while (true) { 21// var temp = intRandom(minT, maxT); 22// if (!randoms.includes(temp)) { 23// randoms.push(temp); 24// break; 25// } 26// } 27// } 28 29// function intRandom(minT, maxT) { 30// return Math.floor(Math.random() * (maxT - minT + 1)) + minT; 31// } 32 33// console.log(randoms); 34 35 36 37 38 39// let arr = []; 40// while (arr.length < 81) { 41// let r = Math.floor(Math.random() * 81) + 1; 42// if (arr.indexOf(r) === -1) arr.push(r); 43// } 44// console.log(arr); 45 46 47 48const mass = document.querySelectorAll('td'); 49const massOne = mass.forEach(a => { 50 a.addEventListener('click', function () { 51 if (a.textContent === '') { 52 this.textContent = createNumber(); 53 } 54 }) 55}); 56 57let randomNumber = []; 58function createNumber() { 59 while (randomNumber.length < 81) { 60 let r = Math.floor(Math.random() * 81) + 1; 61 if (randomNumber.indexOf(r) === -1) { 62 // randomNumber.push(r); 63 return randomNumber; 64 } 65 } 66};
試したこと
こちらのサイトを参考に被らない乱数を作成するプログラムを実装しようと試みた。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
js
1 if (randomNumber.indexOf(r) === -1) { 2 // randomNumber.push(r); 3 return randomNumber; 4 }
ここは、以下のようにすべきかと思います。
- 返したいのは配列ではなく生成した乱数のはず。
push()しないと過去の値との重複チェックができない。
js
1 if (randomNumber.indexOf(r) === -1) { 2 randomNumber.push(r); 3 return r; 4 }
投稿2021/04/18 08:28
編集2021/04/18 08:29
総合スコア21008
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/18 09:09