HTM Class help

Hey guys, I am new to HTML coding and have been practicing making a dot race, like the ones you see on scoreboards and stuff. I am struggling with it and would really appreciate it if someone could help me with what I already have coded.

Code:

<html>  <head> <title>Online Dot Race</title> <script type = "text/javascript" src="DotFunctions.js"> </script> <script type="text/javascript"> // --------------- function TakeStep(p_RaceLength, p_Location) // --------------- // This function is designed to calculate a new location for one "generic" dot. // Assumptions: p_RaceLength and p_Location are numbers // Results: returns a new location that is 1, 2, or 3 steps more { } // --------------- function DisplayTrackArea(p_RaceLength, p_Red, p_Blue) // --------------- // Assumptions: all parameters are valid numbers // Results: all locations are displayed and the track is updated { document.getElementById("t_RedTrack").value = CreateTrack(p_RaceLength, p_Red); document.getElementById("s_RedDot").innerHTML = p_Red; document.getElementById("t_BlueTrack").value = CreateTrack(p_RaceLength, p_Blue); document.getElementById("s_BlueDot").innerHTML = p_Blue; if // need code here... } // --------------- function DisplayResults(p_RedWins, p_BlueWins, p_Ties, p_Races) // --------------- // Assumptions: all parameters are valid numbers // Results: all statistics are displayed in their text boxes { document.getElementById("s_Races").innerHTML = p_Races; // need code here... } </script> </head> <body style="text-align: center">    <h1> Online Dot Race </h1> <hr size='10' noshade> <p> Race Length: <input id="t_Length" type="text" size="2" value="20" /> </p> <p> <input id="b_StartRace" type="button" value="Start a New Race" onclick=" " /> </p> <hr />    <p> <input id="t_RedTrack" type="text" size="21" style="color: White; font-weight: bold; font-family: Courier New; background-color: Red" /> <span id="s_RedDot">0</span> </p> <p> <input id="t_BlueTrack" type="text" size="21" style="color: White; font-weight: bold; font-family: Courier New; background-color: Blue" /> <span id="s_BlueDot">0</span> </p> <p> <input id="b_TakeStep" type="button" value="Take a Step" onclick=" // Add code here... " /> </p> <hr />    <h2> Results </h2> <p> Total Races: <span id="s_Races">0</span> </p> <p> <input id="t_RedWins" type="text" size="5" style="color: White; font-weight: bold; background-color: Red; text-align:center" /> <input id="t_Ties" type="text" size="5" style="color: White; font-weight: bold; background-color: Purple; text-align:center" /> <input id="t_BlueWins" type="text" size="5" style="color: White; font-weight: bold; background-color: Blue; text-align:center" /> </p>    <script type="text/javascript"> // Initialization function InitCounters() { t_Length = 20; RaceLength = 20; Red = 0; Blue = 0; } // need code here... DisplayResults(RedWins, BlueWins, Ties, Races); </script> </body> </html>