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>