Why is my HTML page reloading every time a new entry is submitted into a form?

Question

I am having trouble with my HTML page. My program is meant to collect names using a form, then output them into a table below the form. It is capable of doing just that when the page doesn't reload.

The first time I enter a certain name, the page reloads. After the page has reloaded, and I enter the same name, it doesn't reload upon hitting enter any subsequent time. I don't know why this is, or how to fix it.

Here is the linked JS file

// Gloabal Variables
var enteredName,
  countOutput,
  count,
  table,
  form,
  allNames = [];

function project62Part2() {
  // Your code goes in here.
  function getElements() {
    form = document.getElementById("nameForm");
    countOutput = document.getElementById("numNames");
    table = document.getElementById("table");
  }

  function addName() {
    enteredName = form.name.value;
    allNames.push(enteredName);
  }

  function countNames() {
    // Reset count
    count = 0;

    // Loop through and count names
    for (i = 0; i < allNames.length; i++) {
      count++;
    }
  }

  function output() {
    // Reset table
    table.innerHTML = "<tr><th>Names</th></tr>";
    // Display count
    countOutput.innerHTML = "Total names entered: " + count;

    // Loop through and add to table display
    for (i = 0; i < allNames.length; i++) {
      table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    }
  }

  // Call code
  getElements();
  addName();
  countNames();
  output();

  // Prevent page from reloading
  return false;
}

<form id="nameForm" action="#">
  <label class="formLabel" for="name">Name: </label>
  <input id="name" name="name" />

  <input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
</form>

<div id="numNames">Total names entered: </div>

<table id="table"></table>

My understanding of coding is rudimentary at best, so while I would appreciate any answer, I'd prefer it to be kept simple!

Answer 1

<input type='submit'> causes the page refresh. Replace it with <input type='button'>.

Read more here.

        // Gloabal Variables
    var enteredName,
    	countOutput,
    	count,
        table,
    	form,
    	allNames = [];
    
    function project62Part2() {
        // Your code goes in here.
        function getElements() {
    		form = document.getElementById("nameForm");
    		countOutput = document.getElementById("numNames");
    		table = document.getElementById("table");
    	}
        
    	function addName() {
    		enteredName = form.name.value;
    		allNames.push(enteredName);
    	}
    	
    	function countNames() {
    		// Reset count
    		count = 0;
    		
    		// Loop through and count names
    		for (i = 0; i < allNames.length; i++) {
    			count++;
    		}
    	}
    	
    	function output() {
    		// Reset table
    		table.innerHTML = "<tr><th>Names</th></tr>";
    		// Display count
    		countOutput.innerHTML = "Total names entered: " + count;
    		
    		// Loop through and add to table display
    		for (i = 0; i < allNames.length; i++) {
    			table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    		}
    	}
    	
    	// Call code
    	getElements();
    	addName();
    	countNames();
    	output();
    
    	// Prevent page from reloading
    	return false;
    }

    <form id="nameForm" action="6.2projectpart2.html#">
        <label class="formLabel" for="name">Name: </label>
        <input id="name" name="name" />
        
        <input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
    </form>
    
    <div id="numNames">Total names entered: </div>
    
    <table id="table"></table>