Q&A
回答ありがとうございます。
カスタムデータを使った処理方法の一例として記録に留めさせていただきました。
InnerHTMLを適用して数字を表示させる。
81あるセルの中にそれぞれランダムで1〜81の数字を表示させたい。
クリックされたそのセルに数値が現れるようにしたい。
発生している問題・エラーメッセージ
script.js:87 Uncaught ReferenceError: element is not defined
該当のソースコード
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 10table { 11 /* position: relative; 12 top: 0; 13 left: 0; 14 transform: translate(-50%,-50%); */ 15} 16 17 18 19 20td { 21 padding: 3rem; 22 cursor: pointer; 23 border: 1px solid #000; 24 transition: .3s; 25} 26 27td:hover { 28 background-color: #efefef; 29}
JS
1// // // const number = Math.trunc(Math.random() * 99) + 1; 2// // const mass = document.querySelectorAll('td'); 3// // // const massActive; 4// // let counter = 0; 5 6// // mass.forEach(function (el, i) { 7// // el.addEventListener('click', function () { 8// // if (counter === 0) { 9// // // i = this.innerHTML(number); 10 11// // // i.innerHTML = 'number'; 12// // // counter += 1; 13// // // numberFn(); 14// // // return el; 15// // createNumber(); 16// // return el; 17// // console.log(typeof i, i); 18// // } else { 19// // // alert('no'); 20// // // i = number; 21// // } 22// // // i = number; 23// // // console.log(typeof i, i); 24// // }) 25// // }) 26 27// // function createNumber(el) { 28 29// // const number = Math.trunc(Math.random() * (81 - 1) + 1); 30// // el.createElement('span'); 31// // // const newNumber = document.getElementsByTagName('td').innerHTML = number; 32// // const newNumber = document.createElement('span') 33 34// // console.log(newNumber); 35// // // let newNumber = document.createTextNode(number); 36// // // // i.appendChild(newNumber); 37 38// // // console.log(newNumber); 39// // } 40 41 42 43 44// const mass = document.querySelectorAll('td'); 45// const massActive = mass.forEach(function (el, i) { 46// el.addEventListener('click', function () { 47// // console.log(typeof i, i); 48// createNumber(); 49// }) 50// }) 51 52// function createNumber() { 53 54// const number = Math.trunc(Math.random() * (81 - 1) + 1); 55// const node = document.createElement('span'); 56// const textNode = document.createTextNode(number); 57 58// // document.getElementById(massActive).appendChild(textNode); 59// // console.log(number); 60// // const numberText = document.createTextNode(number); 61// // const numberText = append; 62// // document.getElementById('td').innerHTML = number; 63 64// // massActive.value = number; 65// // massActive.createTextNode(numberText); 66 67// console.log(node); 68// } 69 70// const number = Math.trunc(Math.random() * (81 - 1) + 1); 71const mass = document.querySelectorAll('td'); 72const massActive = mass.forEach(element => { 73 element.addEventListener('click', function () { 74 createNumber(); 75 showNumber(); 76 return element; 77 }); 78}); 79const maxNumber = 81; 80 81function createNumber() { 82 const number = Math.trunc(Math.random() * (maxNumber - 1) + 1); 83 console.log(number); 84} 85 86function showNumber() { 87 document.getElementsByName(element).innerHTML = number; 88 // document.getElementsByName(massActive).value = number; 89} 90
試したこと
innerHTMLの他にcreateTextNodeを使用してランダム生成された数を表示させようと試みた。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答3件
0
js
1function showNumber() { 2 document.getElementsByName(element).innerHTML = number;
この関数から見える範囲に element という変数がないからですね。number もないですね。通常の関数は、関数の呼び元の変数にはアクセスできません。
関数の引数や返り値を駆使して情報を伝えてあげてください。
showNumber()は element と number を引数で受け取るべきcreateNumber()は生成した乱数を return すべき
投稿2021/04/16 09:28
総合スコア21695
0
自己解決
js
1const mass = document.querySelectorAll('td'); 2mass.forEach(c => { 3 c.addEventListener('click', function () { 4 c.textContent = createNumber(1, 81); 5 }); 6}); 7 8function createNumber(min, max) { 9 return Math.floor(Math.random() * (max - min)) + min; 10}
投稿2021/04/17 03:56
総合スコア52
0
カスタムデータの保持してはどうでしょうか？
javascript
1window.addEventListener('DOMContentLoaded', ()=>{ 2 const num=Array(81).fill(null).map((_,x)=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]); 3 document.querySelectorAll('td').forEach((x,y)=>{ 4 x.dataset["num"]=num[y]; 5 x.addEventListener('click',()=>{ 6 x.textContent=x.dataset["num"]; 7 }); 8 }); 9});
投稿2021/04/16 09:35
編集2021/04/16 09:37
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/17 03:56