説明です、配列array[1,2,3,4,5]と0が代入された変数pとhtml欄にtableでレイアウトされたid1,2,3,4,5を持つ1,2,3,4,5があります。最初に配列をバラバラに並び替え、ボタンを押すたびにp++され、pが1だった場合配列の0番を出力、pが2だった場合配列の1番を出力して重複しないランダムボタンができました。そして問題です。tableの1,2,3,4,5とランダムボタンが連動して、ランダムボタンが出力した数字と同じtableの数字がXとなるようにしたいのですが、2つの関係がありません。どうしたら表現できますか?もしかしてidが悪いとか、、回答お願いします。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>tets</title> </head> <body> <input type="button" value="ランダム表示" onclick="choice()"> <table border="1"> <tr> <td><span id="1">1</span></td> <td><span id="2">2</span></td> <td><span id="3">3</span></td> <td><span id="4">4</span></td> <td><span id="5">5</span></td> </tr> </table> <span id="outText" style="font-size:200%;"></span> <span id="subText" style="font-size:150%;"></span> <span id="threeText" style="font-size:100%;"></span> <div id="end"></div> <script> var array = [1,2,3,4,5]; for (var i = array.length - 1; i >= 0; i--){ var rand = Math.floor( Math.random() * ( i + 1 ) ); [array[i], array[rand]] = [array[rand], array[i]] } console.log(array); var p = 0; var choice = function(){ p = p+1; if(p === 1){ document.getElementById('outText').textContent = array[0]; } if(p === 2){ document.getElementById('outText').textContent = array[1]; document.getElementById('subText').textContent = ',' + array[0]; } if(p === 3){ document.getElementById('outText').textContent = array[2]; document.getElementById('subText').textContent = ',' + array[1]; document.getElementById('threeText').textContent = ',' + array[0]; } if(p === 4){ document.getElementById('outText').textContent = array[3]; document.getElementById('subText').textContent = ',' + array[2]; document.getElementById('threeText').textContent = ',' + array[1]; } if(p === 5){ document.getElementById('outText').textContent = array[4]; document.getElementById('subText').textContent = ',' + array[3]; document.getElementById('threeText').textContent = ',' + array[2]; } if(p === 5){ document.getElementById('end').textContent = '終了しました'; var div_element = document.createElement("div"); div_element.innerHTML = "<input type='button' style='width:30%;padding:5px;font-size:30px;' value='もう一度' onclick='window.location.reload();'>"; var parent_object = document.getElementById('end'); parent_object.appendChild(div_element); } } </script> </body> </html>
回答3件
あなたの回答
tips
プレビュー