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

user_19164753 0
Viewed 29

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 class="nav-link" 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 = "⬇️ WORLD DOWNLOAD ⬇️ &#10;";
  var uploader = " - " + document.getElementById("name").value + "&#10;";
  var dateOfUpload = " - " + new Date().toGMTString() + "&#10;";
  var baseName = " - " + document.getElementById("base").value + "&#10;";
  var builders = " - " + document.getElementById("builders").value + " (IGN) " + "&#10;";
  var notes = " - " + document.getElementById("notes").value + "&#10;";
  var filelnk = " - " + document.getElementById("filelnk").value + "&#10;";
  
  // detects if some are empty and then add them al together, probably really inefficient but oh well i literally learnt js today so
  if (builders === " -  (IGN) &#10;") {
    builders = " - Unknown" + "&#10;";
}

  var result = "nothin";
  
  if (notes === " - &#10;") {
    // prints the thingie with NO NOTES section
    var result = title + uploader + dateOfUpload + baseName + builders + " &#8203; &#10;" + filelnk;
    
  } else {
    // prints the thingie with the notes section
    var result = title + uploader + dateOfUpload + baseName + builders + notes + " &#8203; &#10;" + filelnk;
    
  }

  document.getElementById("result").innerHTML = result;
}
  </script>
  </body>
</html>

forms dom html javascript
2 Answers

Ah yes, the classic!

Long story short, event.preventDefault() is most likely your solution here.

Check out this MDN page on this type of event. There's some really cool stuff on that event beyond preventDefault() too!

So in this case, you'll just need to accept the event parameter (often you'll see this just as e, ev, evt, event) in your function renderPost.

Ex:

<button id="submit" onclick="renderPost(e)">Submit</button>
... 
function renderPost(e) {
  e.preventDefault() 
}

Also, just to clear up where in the world that variable is coming from, it will be passed to your function by the onclick handler. Here's some extra details from MDN on the onclick handler

Sidenote: it may actually be easier to debug and understand if you follow how they do it on those MDN docs, where the function isn't placed in the html like you have it (yours it totally fine though!), but rather assigned to the <button> tag in the JS itself. Here's an example of what that might look like:

document.getElementById('submit').onclick = function renderPost(e){
 e.preventDefault() 
 // do all that so called 'cute' stuff 
}
user_140579610

You need to utilize event.preventDefault() in order to prevent that reloading on form submission as HTML forms were more so designed for submitting a form to a POST api on your backend rather than using it within the same webpage (not to say you cant or shouldn't use it this way, you just need to use event.preventDefault() in order to do so). An example of how to do this would go as so:

<button onClick="renderpost(event)"></button>
...
function renderpost(e){
e.preventDefault();
...
}
user_138005400
Related