Why when I update a paragraph in html with the JavaScript DOM does the page reload?-CodePudding

I am very new to JS and was trying to make a simple web page that would be a utility for a Minecraft server I am part of. I'm sorry if this is a stupid problem that's really easy to solve but when I click the "submit" button it displays what is supposed to be displayed (a formatted version of the information you pass to it) for a split second before the page reloads and it is gone. I am really new to JavaScript so I probably made a really silly mistake. The code is below.

<!doctype html>
<html>
  <head>
    <title>tools</title>
    <meta charset="utf8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="" >
  </head>
  <body>
    <div id="container">
      <div id="header-nav">
        <header id="home">tools</header>
        <nav>
        <ul>
          <li><a  href="#">Download Post Formatter</a></li>
        </ul>
        </nav>
      </div>
      <div id="intro">

      </div>
      <div id="form">
      <form>
        <h2>Uploader name</h2>
        <input type="text" id="name" placeholder="name"><br>
        <h2>Place name</h2>
        <input type="text" id="base" placeholder="Place name (add * if unconfirmed by builders)"><br>
        <h2>Builder IGNs</h2>
        <input type="text" id="builders" placeholder="IGNs of all contributors (if known)"><br>
        <h2>Notes by uploader</h2>
        <textarea rows="6" cols="24" id="notes" placeholder="Optional notes by uploader..."></textarea><br>
        <h2>Link to world download</h2>
        <input type="text" id="filelnk" placeholder="bit.ly"><br>
        <br>
        <button id="submit" onclick="renderPost()">Submit</button>
      </form>
      </div>
      <p style="white-space: pre-wrap;" id="result"></p>
  </div>
  <script>
function renderPost() {

  // puts into cute little variables.
  var title = "