随机为每个表格单元分配不同的名称

So I have a program which randomly assigns a name to each cell in the first row of my table from a list of names in a text box with the click of a button, what I want to do is assign different names to each of the cells in the textbox in the click of a button so that no two cells have the same name, here is my code so far:

所以我有一个程序，通过单击按钮从文本框中的名称列表中随机为表格的第一行中的每个单元格指定一个名称，我想要做的是为每个单元格指定不同的名称在单击按钮的文本框中，以便没有两个单元格具有相同的名称，这是我的代码到目前为止：

var rnd = function() {
  var things;
  things = document.getElementById('things').value;
  things = things.replace(', ', ',');
  things = things.split(',');
  setTimeout(function() {
    var list = document.querySelectorAll('.js-result');

    for (var index = 0; index < list.length; index++) {
      var thing = Math.floor(Math.random() * things.length);
      list.item(index).innerHTML = things[thing];
    }
  }, 500);
};

fieldset input {
  display: block;
}
.result {
  border: solid 1px black;
  background: #e0e0e0;
  padding: 1em;
  margin: 1em 0;
}
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;
}

<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();">
          </p>
        </form>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
    </tr>
  </tbody>
</table>

2 个解决方案

#1

Instead of accessing the array element you can very well mutate it using things.splice(thing,1) - see demo below:

您可以使用things.splice（thing，1）很好地改变它，而不是访问数组元素 - 请参阅下面的演示：

var rnd = function() {
  var things;
  things = document.getElementById('things').value;
  things = things.replace(', ', ',');
  things = things.split(',');
  setTimeout(function() {
    var list = document.querySelectorAll('.js-result');

    for (var index = 0; index < list.length; index++) {
      var thing = Math.floor(Math.random() * things.length);
      list.item(index).innerHTML = things.splice(thing,1);
    }
  }, 500);
};

fieldset input {
  display: block;
}
.result {
  border: solid 1px black;
  background: #e0e0e0;
  padding: 1em;
  margin: 1em 0;
}
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;
}

<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();">
          </p>
        </form>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
    </tr>
  </tbody>
</table>

#2

One way to do this is using the unique things array. This can be done by using the filter function on the array and passing in a predicate which checks for the uniqueness.

一种方法是使用unique things数组。这可以通过在数组上使用过滤器函数并传入一个检查唯一性的谓词来完成。

let uniqueThings = things.filter((currentValue, index, array) => array.indexOf(currentValue) === index); ;
list.item(index).innerHTML = uniqueThings[index];

let uniqueThings = things.filter（（currentValue，index，array）=> array.indexOf（currentValue）=== index）; ; list.item（index）.innerHTML = uniqueThings [index];

Complete Code:

完整代码：

var rnd = function () {
		var things;
		things = document.getElementById('things').value;
		things = things.replace(', ', ',');
		things = things.split(',');
		setTimeout(function () {
            var list = document.querySelectorAll('.js-result');
    
            for (var index = 0; index < list.length; index++) {
                var thing = Math.floor(Math.random() * things.length);
              let uniqueThings = things.filter((currentValue, index, array) => array.indexOf(currentValue) === index); ;   
              list.item(index).innerHTML = uniqueThings[index];
            }
		}, 500);
	};
    

		

margin: 1em 0;
	}

	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;
	}

<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();">
		</p>
	</form>
</td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
</tr>
</tbody>
</table>