Loading Bar On A Server's Loading Page

I made a basic foot-holder for a server my friend’s working on. We talked about adding a loading bar below the paragraph of text, but I haven’t that done before.

I imagine it like this:

-Below, there’s a line of text that says "Downloading: " then a string displaying the file that’s currently downloading.

-Underneath, another line of text saying "Files Remaining: " then an integer displaying how many files are currently left to download

-And just below that, the loading bar itself, that shows the total progress of all the files downloaded.

I’ve already checked out the Gmod Wiki, but I’m certain I’m not following it so clearly.


<script>

			function SetFilesTotal (total) {

				<p>Files: </p> & (total)
			}

			function DownloadingFile (filename) {

				<p>Downloading: </p> & (filename)
			}

			function SetFilesNeeded (needed) {

				
			}

		</script>

That was my assumption of how it would work, but I’m pretty stuck now.

You can’t stick html inside your script like that. In the body of your page, do something like this:



<p>Files: <span id="totalfiles"></span></p>
<p>Downloading: <span id="currentfile"></span></p>


And then in your script:



<script type="text/javascript">
  function SetFilesTotal( total )
  {
    document.getElementById( "totalfiles" ).innerText = total;
  }
  function DownloadingFile( filename )
  {
    document.getElementById( "currentfile" ).innerText = filename;
  }
</script>

Of course style as desired.

I get it now, thanks, although I’m still really ambitious about this loading bar.