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>


Reply With Quote
Bookmarks