Menu
I am very new with Javascript and implementing it on a webpage but trying to learn.
I’m trying too make a simple set of functions that will flip a coin and record the resulting frequencies of heads vs tails. I also want the image to switch from heads/tails depending on how the flip function lands the coin.
I’ve been working on this for three days straight with no progress.
Please help!
[CODE]
<script src= “../hw4/hw4.js”></script>
<div class=”content”>
<img id = “coinImage1” src = “../images/coinh.jpg” alt = “Coin Image”>
<form action = “#”>
<input id = “toss” type = “button” value = “Toss”>
</form>
<div id= “outputavh”></div>
<div id= “outputavt”></div>
</div>
[CODE]
<script>
var freqh = 0;
var freqt = 0;
var avh = 0;
var avt = 0;
var coinImage;
function start()
{
var button = document.getElementById(“toss”);
button.addEventListener(“click”, flipCoin(), false);
coinImage = document.getElementById(“coinImage1”);
}
function flipCoin()
{
setImage(coinImage);
updateTable();
}
function setImage(sideImage)
{
var coinValue = Math.floor(1 + Math.random() * 2);
if(coinValue == 1)
{
sideImage.setAttribute(“src”, “../images/coinh.jpg”);
sideImage.setAttribute(“alt”, “Coin facing Heads”);
freqh += 1;
}
else
{
sideImage.setAttribute(“src”, “../images/coint.jpg”);
sideImage.setAttribute(“alt”, “Coin facing Tails”);
freqt += 1;
}
}
function updateTable()
{
avh = <h1>(freqh / (freqh + freqt))</h1>;
avt = <h2>(freqt / (freqh + freqt))</h2>;
var avhOut = document.getElementById(“outputavh”);
var avtOut = document.getElementById(“outputavt”);
avhOut.innerHTML = avh;
avtOut.innerHTML = avt;
}
window.addEventListener(“load”, start, false);
</script>