从数组Javascript生成随机元素组

Question

HI I am working on project for school and I am trying to generate random groups of names from a list of names. The group size and amount of groups will be based off the users input. I have the code to randomly generate a single element from the array, but I need some help grouping. This my code so far. Its not functioning Please help thanks

 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 */ * { 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: 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

Here's a first fix: to add a new element to an array (like it appears you're doing in your for loop), you should use the arr.push() method. You'll also want to declare newArr as an empty array before that.

I'm not entirely sure, however, that you're doing what you intend to in your groups function. Right now it looks like you're choosing a random name from your list and then, for as many times as there are names in your list, assigning that one random name to your new array.

What might help you is to just write out a list of the steps you want to take (what we call pseudo-code), then turn that list into javascript code. It can be a lot easier to find inconsistencies in that list than it would be to sift through the sometimes confusing code.

Hope this helps, let me know if you have any more questions!

Answer 2

Not sure what is your function groups doing. As I can see it take all data in arr and put in newarr with random sequence. You should check on .push() method for creating new array. It should make your code work.

Sample code:

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

Result: Your newarr will have all 3 names in it.

Answer 3

This is my interpretation of your question. Hope it helps..

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