Search code examples
javascriptarrayshtml-tableassociative-arraycoin-flipping

How to display associative array in a table?

Can anyone help me? I'm writing a script for a "Luck Game" with the objectives

  1. Take user input of any number they wish, generate a random number from 0 to the number they input and display it in a result array.

  2. Simulate a game of "Heads or Tails" and also display that result in the same result array (I will be using associative arrays)

  3. Run the two objectives above for a total of 6 times.

  4. Display the results in a table.

  5. Total the amount of 'Heads' and the total amount of 'Tails' each and display them.

  6. Return the smallest number out of the 6 results.

I've already completed items 1, 2, and 3. I just need help on item 6. How to display my results on a 2x7 table with the headings "Coin Side" and "Number" as well as how to sum up all the "heads" and "tails" of the 6 trials, and also return the smallest number generated?

 <body>
 <div id = "luckGame"></div>

 var userInput = prompt("Enter maximum number output: ");
 printThis = document.getElementById('luckGame');

 function coinFlip() {
      return (Math.floor(Math.random() < 2) === 0) ? 'Heads' ; 'Tails';
 }

 for (var i = 0; i < 6; i++)
 {
      var result = [];

      result["randomNum"] = (Math.floor(Math.random()*userInput);

      result["coin"] = (coinFlip());

     printThis.innerHTML = result["coin"] + " " + result["randomNum"];
     //This loop will run 6 times.
     //This should print for example:  Heads  29 but I need to put all the results 
     //in a 2x7 table with labels "Coin Side" and "Number" included.  How do I do this?
 }

 //Code here needed to sum total of 'Heads' and 'Tails'
 //Code here needed to return the smallest number from the results.

 </body>

My CSS for the table

 .results {
      border: 1px solid black;
      width: 200px;
      height: 20px;
   }

My rough table

 var resultsTable = "<table class= 'results'><tr><td>" + "Coin Side" + "</td><td>" + "Number" + "</td></tr>";
     resultsTable += "<tr><td> + result["coin"] + "</td><td> + result["randomNum"] + </td></tr>";
     ... // repeat 4 more times.
     resultsTable += "<tr><td> + result["coin"] + "</td><td> + result["randomNum"] + </td></tr></table>;

If I need to put more details please let me know.

Solution

  • First, create a table with headers

    var table = document.createElement("table");
table.innerHTML = "<tr><th>Coin Side</th><th>Number</th></tr>";

    Then in your loop simply add this code at the end to add a row to the table

    var row = document.createElement("tr");
var coinCell = document.createElement("td");
var numCell = document.createElement("td");
coinCell.innerHTML = result["coin"];
numCell.innerHTML = result["randomNum"];
row.appendChild(coinCell);
row.appendChild(numCell);
table.appendChild(row);

    And finally, add the table to the document

    document.body.appendChild(table);

    For counting heads and tails, add this code to your existing loop

    (result["coin"] === "Heads") ? heads++ : tails++

    Just create two global variables and set them to zero first

    var heads = 0;
var tails = 0;

    For getting the min value, first create a global variable set to the max value

    var min = eval(userInput);

    Then, in your loop, check if the generated number is less than the current min

    if(result["randomNum"] < min)
  min = result["randomNum"];

    Demo: https://codecanister.com/Project/d547eed9/5/result/