CODEWITHSUNDEEP
javascripthtml
Mellow
Mellow

Reputation: 39

Biased Coin Flip With User inputs

<html>

<head>
  <script>
    function coinFlip() {
      return (Math.random() < 0.3) ? 'Heads' : 'Tails';
    }

    var flipamount = 100;
    var countHeads = 0;
    var countTails = 0;
    for (var i = 0; i < flipamount; i++) {
      if (coinFlip() === 'Heads') {
        countHeads++;
        //document.getElementById("Coin").innerHTML = "Heads";
      } else {
        countTails++;
        //document.getElementById("Coin").innerHTML = "Tails";
      }
    }

    // coinFlip();

    //alert("Heads appear "+(countHeads/howManyTimes)*100+"% of the time"); //Code that works

    alert("Heads appears " + countHeads + ", Tails appears " + countTails); //Code that works
  </script>

</head>

<button type="button" onclick="coinFlip()" id="Coin">CLICK ME</button>
<p>
</p>

</html>

So I need to make a biased coin flipper. So far, I've managed to make the coin more biased towards tails or heads, but now I need to be able to make some of these variables editable in HTML. I have to be able to allow the user to change the probability at will, as well as be able to control how many times the user flips the coin.

I also can't make the button work, I can only make the results appear using alert in my script. Kind of stuck at the moment and would appreciate any assistance. I'm also not too experienced in Javascript.

Upvotes: 2

Views: 458

Answers (2)

ecg8
ecg8

Reputation: 1392

This is pretty raw and doesn't have any error handling in it, but should answer your original question. It has inputs for probability and for number of flips. After each set of flips you keep a running total of how many heads and tails there are.

I added a function to run after button press and gave the <p> element an ID to be able to write the results directly into it.

//set both heads and tails to zero 
var countHeads = 0;
var countTails = 0;
//ternary function to decide between heads or tails
function coinFlip(param) {
	return (Math.random() < param) ? 'Heads' : 'Tails';
}

function Execute() {
    //takes the value of the number input
	var flipamount = Number(document.getElementById("numb").value);
    for (var i = 0; i < flipamount; i++) {
    //takes the value of the probability input to use in the coinFilp function
  	if (coinFlip(Number(document.getElementById("prob").value)) === 'Heads') {
        //add one to heads if heads comes up
    	countHeads++;
    } else {
        //add one to tails if tails comes up
    	countTails++;
    }
  }
  //write result to the paragraph
  document.getElementById("result").innerHTML = "Heads appears " + countHeads + ", Tails appears " + countTails;
}
Probability: <input id="prob" type="number" size="3" min="0.1" max="1" step="0.1" value="0.5" /><br />
Number Flips: <input id="numb" type="number" size="3" min="10" max="100" step="10" value="50" /><br />
<button type="button" onclick="Execute()" id="Coin">CLICK ME</button>
<p id="result"></p>

Upvotes: 2

JonoJames
JonoJames

Reputation: 1223

  • Added An Id to your button and attached an event
  • Move the script to be declared after the HTML DOM
  • ADDED a function to do the alert
  • Added Two Event Listeners
  • Added two form element for adjustable value's
    • - 

function coinFlip() {
 let InputElem = document.getElementById('textBoxRatio').value;

            return (Math.random() < InputElem) ? 'Heads' : 'Tails';

        }

           

function go()
    {
    //Get Input

     var howManyTimes=  document.getElementById('textBoxSpin').value;
     var countHeads=0;
     var countTails=0;
                for (var i=0; i<howManyTimes;i++){
                    if (coinFlip()==='Heads'){
                         countHeads++;                   
                     } 
                     else 
                     {
                        countTails++;
                     }

            }
     //  alert("Heads appears " + countHeads + ", Tails appears " + countTails); 
     let I =   document.getElementById('result').innerHTML="Heads appears " + countHeads + ", Tails appears " + countTails;
    }
         //Add Event Listener
          var t = document.getElementById('NewId');
          t.addEventListener("click", coinFlip);
          t.addEventListener("click", go);
<html>
    <head>
    </head>
    
<body>

<label>Ratio :</label >
<input id='textBoxRatio' type ='text'><br>
<label>Spin Count :</label >
<input id='textBoxSpin' type ='text'><br>
<button id='NewId' type="button"  id="Coin">CLICK ME</button>

    <p id='result'>
    </p>
<!-- SCRIPT HERE !-->

</body>


</html>

Just remember to call your script after the HTML button Tag

Upvotes: 2

Related Questions