随机分配输入到文本框

时间：2017-01-01 16:58:25

标签： javascript jquery html css

我创建了一些代码，从文本框中输入的东西列表中随机选择一个东西，我也能够将代码输入到表格的第一个单元格中，我现在想要的do将文本框中输入的所有内容分配到行的每个单元格中，这是我的代码：

	var rnd = function () {
		var loader, things;
		loader = document.getElementById('ajax-loader');
		loader.style.display = 'inline';
		things = document.getElementById('things').value;
		things = things.replace(', ', ',');
		things = things.split(',');
		setTimeout(function () {
			var thing;
			loader.style.display = 'none';
			thing = Math.floor(Math.random() * things.length);
			document.getElementById('result').innerHTML = things[thing];
		}, 500);
	};
	
	// a little functionality for erin foley...

	// save the things the user entered
	document.getElementById('things').addEventListener('blur', function ( evt ) {
		window.localStorage['things-to-be-picked'] = this.value
	})

	// use the user’s saved things
	document.addEventListener('DOMContentLoaded', function ( evt ) {
		var things = window.localStorage['things-to-be-picked']
		if ( things ) {
			document.getElementById('things').value = things
		}
	})
	fieldset input {
		display: block;
	}
	#result {
		border: solid 1px black;
		background: #e0e0e0;
		padding: 1em;
		margin: 1em 0;
	}
	#ajax-loader {
		display: none;
		margin-bottom: -4px;
	}

	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 align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B &amp; B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
	<form method="get" action="/" onsubmit="return false;">
		<fieldset>
			<label>
				<textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
			</label>
		</fieldset>
		<p>
			<input type="button" value="Pick one!" onclick="rnd();">
			<img id="ajax-loader" src="http://andrew.hedges.name/experiments/random/ajax-loader.gif" alt="Picking...">
		</p>
	</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>

编辑：即使错误显示代码段仍然有效。

以下是一些完全符合上述代码段要求的代码：

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 &amp; 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>

1 个答案:

答案 0 :(得分：1)

你的html中有多个具有相同id结果的元素需要更改。你可以给所有div类的结果，并可以使用函数getDiv（），如下例所示，以获得下一个空div。

＆＃13;
＆＃13; 
var getDiv = function(){
  
  var optionCount = document.getElementsByClassName('result');
  var rightDiv = null;
  for(var i = 0; i < optionCount.length; i++)
  {
    if(document.getElementsByClassName('result')[i].childNodes.length == 0)
    {
      rightDiv = document.getElementsByClassName('result')[i];
      break;
    }
  }
  
  return rightDiv;
  
}

var rnd = function () {
		var loader, things;
		loader = document.getElementById('ajax-loader');
		loader.style.display = 'inline';
		things = document.getElementById('things').value;
		things = things.replace(', ', ',');
		things = things.split(',');
		setTimeout(function () {
			var thing;
			loader.style.display = 'none';
			thing = Math.floor(Math.random() * things.length);
            var elem = getDiv();
            if(elem !== null)
			elem.innerHTML = things[thing];
		}, 500);
	};
	
	// a little functionality for erin foley...

	// save the things the user entered
	document.getElementById('things').addEventListener('blur', function ( evt ) {
		window.localStorage['things-to-be-picked'] = this.value
	})

	// use the user’s saved things
	document.addEventListener('DOMContentLoaded', function ( evt ) {
		var things = "";//window.localStorage['things-to-be-picked']
		if ( things ) {
			document.getElementById('things').value = things
		}
	})
＆＃13; 
fieldset input {
		display: block;
	}
	#result {
		border: solid 1px black;
		background: #e0e0e0;
		padding: 1em;
		margin: 1em 0;
	}
	#ajax-loader {
		display: none;
		margin-bottom: -4px;
	}

	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;
	}
＆＃13; 
<!DOCTYPE html>
    <html>
      <body>
<table align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B &amp; B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
	<form method="get" action="/" onsubmit="return false;">
		<fieldset>
			<label>
				<textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
			</label>
		</fieldset>
		<p>
			<input type="button" value="Pick one!" onclick="rnd();">
			<img id="ajax-loader" src="http://andrew.hedges.name/experiments/random/ajax-loader.gif" alt="Picking...">
		</p>
	</form>
</td>
<td><div class="result"></div></td>
<td><div class="result"></div></td>
<td><div class="result"></div></td>
<td><div class="result"></div></td>
<td><div class="result"></div></td>
<td><div class="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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题