Why would my HTML webpage refresh when i click a button that closes a form

Question

When i click the button that runs closeForm() in my form, the entire webpage refreshes. Given that this project doesn't save any info anywhere, it resets anything I've done with it on a refresh.

Is there a reason it is doing this?

for an example of what it looks like here is a link to a video I took of it:

https://drive.google.com/open?id=1PyAXzuNSqvSNoKvgV-uGny9mB3F5NEqc

relevant code is here:

  <form class="form-container">
    <h1>Select Weapon</h1>  
    <input class = "longsword-button" type="image" src="./weapon-longsword.jpg" onclick = "closeForm()" />
    <input class = "dagger-button" type="image" src="./weapon-dagger.jpg" onclick = "closeForm()" />
  </form>
</div>

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}```

Answer 1

As you can see here , type='image' on inputs act as type='submit' . A couple of possible solutions for your problem:

1 - Use regular <img /> tags instead <input type='image' /> for your images.

2 - Cancel the event when clicking your images if you leave the markup as it is now.

<input class = "longsword-button" type="image" src="./weapon-longsword.jpg" onclick = "return closeForm()" />
<input class = "dagger-button" type="image" src="./weapon-dagger.jpg" onclick = "return closeForm()" />

function openForm() {
  document.getElementById("myForm").style.display = "block";
  return false;
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
  return false;
}