用户输入的有偏硬币翻转

Question

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

所以我需要做一个有偏见的硬币翻转器。 到目前为止，我已经设法使硬币更偏向于反面或正面，但现在我需要能够在 HTML 中使其中一些变量可编辑。 我必须能够允许用户随意更改概率，并且能够控制用户掷硬币的次数。

我也无法使按钮工作，我只能在脚本中使用 alert 使结果出现。 目前有点卡住了，希望能提供任何帮助。 我对 Javascript 也不太有经验。

Answer 1

为您的按钮添加了一个 ID 并附加了一个事件
将要声明的脚本移到 HTML DOM 之后
添加了一个 function 来做警报
添加了两个事件监听器
为可调值添加了两个表单元素

-

 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>

请记住在 HTML 按钮标签之后调用您的脚本

Answer 2

这是非常原始的，并且没有任何错误处理，但应该回答您的原始问题。 它具有概率和翻转次数的输入。 在每组翻转之后，您都会记录有多少正面和反面。

我添加了一个 function 在按钮按下后运行，并为<p>元素提供了一个 ID，以便能够将结果直接写入其中。

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

用户输入的有偏硬币翻转

问题描述

2 个解决方案

解决方案1
2 2019-11-15 02:24:54

解决方案2
2 已采纳 2019-11-15 02:44:07

用户输入的有偏硬币翻转

问题描述

2 个解决方案

解决方案1 2 2019-11-15 02:24:54

解决方案2 2 已采纳 2019-11-15 02:44:07

解决方案1
2 2019-11-15 02:24:54

解决方案2
2 已采纳 2019-11-15 02:44:07