從數組中生成隨機的Elments組

Question

您好我正在爲學校的項目工作，我試圖從名稱列表中隨機生成一組名稱。組的大小和數量將基於用戶輸入。我有代碼從數組中隨機生成一個元素，但我需要一些幫助分組。 這是我的代碼。它不能正常工作 請幫助謝謝

function yeah() 
 
     { 
 
     var arr = prompt("Enter your names").split(",") 
 
     console.log(arr); 
 
     var random = arr[Math.floor(Math.random() * arr.length)]; 
 
     document.getElementById("h2").innerHTML = random; 
 
     } 
 
     
 

 
function groups() 
 
     { 
 
      var arr = prompt("Enter your names").split(","); 
 
      var random = arr[Math.floor(Math.random() * arr.length)]; 
 
      var numElem = document.getElementById("input2").value; 
 
      for (i=0;i <= arr.length; i++) 
 
      { 
 
       
 
        
 
       var newArr = [random]; 
 
       console.log(newArr); 
 
       //print name to a new list 
 
       //remove name from old list 
 
       /* var arr = prompt("Enter your names").split(",") 
 
       var groupNum = document.getElementById("input1").value; 
 
       var newArrays = arr.length/groupNum; */ 
 
       
 
     
 
      } 
 
      
 
     
 
     }

/* Reset */ 
 
    * { 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    } 
 

 
    html,body { 
 
    height:100%; 
 
    margin:0; 
 
    font-family: 'Montserrat', 'sans-serif'; 
 
    color:#424242; 
 
    overflow: hidden; 
 
    } 
 
    .display { 
 
    text-align: center; 
 
    display: table; 
 
    height:100%; 
 
    margin:0 auto; 
 
    } 
 
    .wrap { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    } 
 
    p { 
 
    font-size: 50px; /* For lamers who don't support viewport sizing */ 
 
    font-size:20vmin; 
 
    text-align: center; 
 
    margin: 0; 
 
    } 
 
#h2 { 
 
    float: center; 
 
    font-size: 30vmin; 
 

 
    background-size: contain; 
 

 
} 
 
    input.text-display { 
 
    display: inline-block; 
 
    color: #5E5E5E; 
 
    font: bold 20px arial; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    margin: 20px auto; 
 
    padding: 15px 20px; 
 
    background: #EFF0F2; 
 
    border-radius: 4px; 
 
    border-top: 1px solid #F5F5F5; 
 
    box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333; 
 
    text-shadow: 0px 1px 0px #F5F5F5; 
 
    } 
 

 
    span.love { 
 
    display: block; 
 
    position: absolute; 
 
    bottom:10px; 
 
    width: 100%; 
 
    text-align: center; 
 
    } 
 
    span.love a { 
 
    text-decoration: none; 
 
    color:#D12026; 
 
    } 
 
    .twitter-follow-button { 
 
    vertical-align: text-bottom; 
 
    } 
 
    .twitter-share-button { 
 
    vertical-align: text-bottom; 
 
    }

<div class="display"> 
 
      <div class="wrap"> 
 
       <p>Your random value is:</p> 
 
       <div id="h2">Null</div> 
 
       
 
       <input class="text-display" type="button" onclick="yeah()" height="50px" width="50px" value="click to input data"> 
 
       <!-- <input type="button" onclick="display()" value="display random"> --> 
 
       <br> 
 
       <input id="input1" value="Enter number of Groups"> 
 
       <input id="input2" value="Enter number of elements per Group"> 
 
       <input type="button" onclick="groups()"> 
 
      </div> 
 
      
 
     </div>

Answer 1

這裏的首次定位：將新元素添加到一個數組（像它看起來你在你的for循環做），你應該使用arr.push（）方法。您還需要在此之前將newArr聲明爲空數組。

但是，我不完全確定，你正在做你打算在你的組功能。現在，它看起來像從列表中選擇一個隨機名稱，然後在列表中有多少名稱的同時，將該隨機名稱分配給新數組。

什麼可能會幫助你只寫出你想要採取的步驟列表（我們稱之爲僞代碼），然後將該列表轉換爲javascript代碼。在列表中找到不一致性要比篩選有時易混淆的代碼要容易得多。

希望這有助於，讓我知道如果您有任何問題！

Answer 2

不確定你的功能組在做什麼。正如我所看到的那樣，將所有數據都存入arr中，並以隨機順序放入newarr中。你應該檢查.push（）方法來創建新的數組。它應該使你的代碼工作。

示例代碼：

var newarr = ["David", "Mic"]; 
newarr.push("Adeline"); 

結果：您newarr將所有3名在其中。

Answer 3

這是我對你的問題的解釋。希望它有幫助..

<script> 
    var arr = new Array(); 
    function yeah() 
    { 
    arr = prompt("Enter your names").split(",") 
    console.log(arr); 
    //var random = arr[Math.floor(Math.random() * arr.length)]; 
    var allStudents =""; 

    for(var i=0; i<arr.length; i++) { 
     allStudents += arr[i] + "<br/>\n"; 
    } 

    document.getElementById("h2").innerHTML = allStudents; 
    } 


    function groups() 
    { 
     var arr = prompt("Enter your names").split(","); 

     var groups = document.getElementById("groups").value; 
     var perGrp = document.getElementById("per_grp").value; 

     var innerText = "<h4>All</h4> "; 
     for(var i=0; i<arr.length; i++) { 
      innerText += arr[i] + ","; 
     } 
     innerText += "<br/>\n";    


     arr = shuffleArray(arr); 

     var finalGroups = new Array(); 

     for(var i=0; i<groups; i++) { 
      // assign shuffled elements 
      var grpArr = ""; 
      for(j=0; j<perGrp; j++) { 
       grpArr += arr[0] + ","; 
       arr.shift(); // removes first element from array  
      } 

      grpArr = grpArr.substring(0,grpArr.length - 1); 
      finalGroups[i] = grpArr; 
     } 




     innerText += "<h4>Groups</h4><br/>\n"; 
     innerText += "<table width='100%' border='1'><tr>\n";   
     for(var i=0; i<groups; i++) { 
      // print groups 
      var j=i+1; 
      var grpArr = finalGroups[i].split(","); 
      innerText += "<td>Group " +j+"<br>"; 
      for(var k=0; k < grpArr.length; k++){ 
       innerText += grpArr[k] + "<br>"; 
      } 

      innerText += "</td>\n"; 
     } 
     innerText += "</tr></table>\n"; 

     document.getElementById("FinalGroups").innerHTML = innerText; 


    } 

    /** 
    * Randomize array element order in-place. 
    * Using Durstenfeld shuffle algorithm. 
    */ 
    function shuffleArray(array) { 
     for (var i = array.length - 1; i > 0; i--) { 
      var j = Math.floor(Math.random() * (i + 1)); 
      var temp = array[i]; 
      array[i] = array[j]; 
      array[j] = temp; 
     } 
     return array; 
    } 


</script> 
    <style> 
    /* Reset */ 
     * { 
      margin: 0; 
      padding: 0; 
     } 

     html,body { 
     height:100%; 
     margin:0; 
     font-family: 'Montserrat', 'sans-serif'; 
     color:#424242; 
     overflow: hidden; 
     } 
     .display { 
     text-align: center; 
     display: table; 
     height:100%; 
     margin:0 auto; 
     } 
     .wrap { 
     display: table-cell; 
     vertical-align: middle; 
     } 
     p { 
     font-size: 30px; /* For lamers who don't support viewport sizing */ 
     font-size:10vmin; 
     text-align: center; 
     margin: 0; 
     } 
    #h2 { 
     float: center; 
     font-size: 10vmin; 

     background-size: contain; 

    } 
     input.text-display { 
     display: inline-block; 
     color: #5E5E5E; 
     font: bold 20px arial; 
     text-decoration: none; 
     text-align: center; 
     margin: 20px auto; 
     padding: 15px 20px; 
     background: #EFF0F2; 
     border-radius: 4px; 
     border-top: 1px solid #F5F5F5; 
     box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333; 
     text-shadow: 0px 1px 0px #F5F5F5; 
     } 

     span.love { 
     display: block; 
     position: absolute; 
     bottom:10px; 
     width: 100%; 
     text-align: center; 
     } 
     span.love a { 
     text-decoration: none; 
     color:#D12026; 
     } 
     .twitter-follow-button { 
     vertical-align: text-bottom; 
     } 
     .twitter-share-button { 
     vertical-align: text-bottom; 
     } 


    </style> 

    <div class="display"> 
     <div class="wrap"> 
      <p>Create Random Groups</p> 
      <!--<div id="h2"> </div> 

      <input class="text-display" type="button" onclick="yeah()" value="click to input data"> --> 
      <!-- <input type="button" onclick="display()" value="display random"> --> 
      <br> 
      <input id="groups" placeholder="Enter number of Groups" > 
      <input id="per_grp" placeholder="Enter number of elements per Group"> 
      <br/> 
      <input type="button" value="Create Groups" onclick="groups()"> 
      <div id="FinalGroups"></div> 
     </div> 



    </div>