1
私は、テキストボックスに入力された値のリストからランダムに選択するボタンをクリックすると、それを操作することができますランダムに生成された値をテーブルの最初のセルに挿入しますが、ボタンをクリックして行内の各セルにランダムに異なる値を割り当てることが可能かどうか疑問に思っていましたか？ここに私のコードは次のとおりです。行の各セルにランダムな値を割り当てる
\t var rnd = function() {
\t \t var loader, things;
\t \t loader = document.getElementById('ajax-loader');
\t \t loader.style.display = 'inline';
\t \t things = document.getElementById('things').value;
\t \t things = things.replace(', ', ',');
\t \t things = things.split(',');
\t \t setTimeout(function() {
\t \t \t var thing;
\t \t \t loader.style.display = 'none';
\t \t \t thing = Math.floor(Math.random() * things.length);
\t \t \t document.getElementById('result').innerHTML = things[thing];
\t \t }, 500);
\t };
\t
\t // a little functionality for erin foley...
\t // save the things the user entered
\t document.getElementById('things').addEventListener('blur', function (evt) {
\t \t window.localStorage['things-to-be-picked'] = this.value
\t })
\t // use the user’s saved things
\t document.addEventListener('DOMContentLoaded', function (evt) {
\t \t var things = window.localStorage['things-to-be-picked']
\t \t if (things) {
\t \t \t document.getElementById('things').value = things
\t \t }
\t })\t fieldset input {
\t \t display: block;
\t }
\t #result {
\t \t border: solid 1px black;
\t \t background: #e0e0e0;
\t \t padding: 1em;
\t \t margin: 1em 0;
\t }
\t #ajax-loader {
\t \t display: none;
\t \t margin-bottom: -4px;
\t }
\t table {
\t \t \t font-family: arial, sans-serif;
\t \t \t border-collapse: collapse;
\t \t \t width: 75%;
\t }
\t td,
\t th {
\t \t \t border: 1px solid #dddddd;
\t \t \t text-align: left;
\t \t \t padding: 8px;
\t \t \t text-align: center
\t }
\t tr:nth-child(even) {
\t \t \t background-color: #dddddd;
\t }<!DOCTYPE html>
<html>
<body>
<table align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
\t <form method="get" action="/" onsubmit="return false;">
\t \t <fieldset>
\t \t \t <label>
\t \t \t \t <textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
\t \t \t </label>
\t \t </fieldset>
\t \t <p>
\t \t \t <input type="button" value="Pick one!" onclick="rnd();">
\t \t \t <img id="ajax-loader" src="http://andrew.hedges.name/experiments/random/ajax-loader.gif" alt="Picking...">
\t \t </p>
\t </form>
</td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>EDIT：エラーは、スニペットがまだ動作を示していますが。ここで
は、私は上記のスニペットがやりたい正確に何を行い、いくつかのコードです：
var round1 = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham'];
var round2 = ['Cyril Willard', 'Gale Frank', 'Aveline Derricks', 'Darcey Bullock', 'Jaiden Deering', 'Glenn Benn'];
var round3 = ['George Washington', 'John Adams', 'Tom Jefferson', 'James Madison', 'James Monroe', 'John Quincy Adams'];
/* game is a multidimensional array.
| Each element is an array(sub-array).
| Each sub-array is a row in a table.
| Each element of a sub-array is a cell.
*/
var game = [round1, round2, round3];
// count will be incremented per click of button
var count = 0;
function rounds(n, obj) {
// Determine which sub-array to use
var array = obj[n - 1];
// Determine the specific <tr>
var row = 'tr:nth-of-type(' + n + ')';
// Reference each <td> cell of the <tr> row
var cells = document.querySelectorAll('tbody ' + row + ' td');
// Cell count
var x = 0;
// Separate each element of sub-array
array = array.slice(0);
// while loop establishes limits and iteration
while (array.length > 0 && x < cells.length) {
// Get a randomly generated number
var randomIndex = Math.floor(Math.random() * array.length);
/* On each iteration...
| ...insert the element of sub-array...
| ...that was determined by a randomly...
| ...generated index number.
*/
cells[x].innerHTML = array[randomIndex];
// Increment cell count
x++;
// Join all of the cells together in it's new order
array.splice(randomIndex, 1);
}
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
} <!DOCTYPE html>
<html>
<body>
<table id="example" class="display" align=center>
<thead>
<tr>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div style="padding:25px" align=center>
<!-- This button's attribute event has a incremental counter, so each successive click will change the count parameter -->
<button type="button" onclick="count++;rounds(count, game)">Simulate to next round</button>
</div>
</body>
</html>
あなたが欲しいものを正確に行うコードをお持ちでしたら、ここで何が問題なのですか？ – Pointy
私が欲しいものを正確に行うコードは、テキストボックス内の名前のリストからランダムに選択することはできません。 – ChippeRockTheMurph