無作為に各テーブルセルに異なる名前を割り当てます。

Question

ボタンをクリックしてテキストボックス内の名前のリストからテーブルの最初の行の各セルにランダムに名前を割り当てるプログラムがあります。行うには2個のセルが同じ名前を持っていないように、ボタンのクリックでテキストボックス内のセルのそれぞれに異なる名前を割り当てるされ、ここに私のコードは、これまでのところです：

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>

Answer 1

の代わりにの配列要素を使用すると、非常にうまくいく可能性がありますは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>

Answer 2

一つの方法は、ユニークなthingsアレイを使用しています。これは、配列上のfilter関数を使用し、一意性をチェックする述部を渡すことによって実行できます。

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

完全なコード：

var rnd = function() { 
 
\t \t var things; 
 
\t \t things = document.getElementById('things').value; 
 
\t \t things = things.replace(', ', ','); 
 
\t \t things = things.split(','); 
 
\t \t 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]; 
 
      } 
 
\t \t }, 500); 
 
\t }; 
 
    
 

 
\t \t

margin: 1em 0; 
 
\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 }

<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> 
 
\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 </p> 
 
\t </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>