Issue with disappearing of pop up element after clicking button

Question

so I'm working on a school project. The goal is to calculate the surface of a triangle in javascript and display the results in html. I created a form to enter the values of the variables g and h.

Now I want to replace the header text with getelementbyid but somehow it pops up and disappears directly when I click the button. try it yourself and let me know what I'm doing wrong.

function berechnen() {
  var g = document.getElementById("grundfläche").value;
  var h = document.getElementById("höhe").value;

  var fläche = g*h/2;
  var ergebnis =  "Das Ergebnis für die Flächenberechnung eines Dreickecks mit der Grundfläche " + g + " und der Höhe " + h + " beträgt " + fläche;
  document.getElementById('heading').innerText = ergebnis;

}

<!DOCTYPE html>
<html lang="de" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Fläche eines Dreiecks</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="rechnung.js" charset="utf-8"></script>
</head>

<body>

  <div class="container">
    <h1 id="heading">Die Fläche eines Rechtecks berechnen</h1>
    <form>
      <input type="text" name="grundfläche" id="grundfläche" maxlength="10" placeholder="Gib die Grundseite des Dreiecks ein">
      <input type="text" name="höhe" id="höhe" maxlength="10" placeholder="Gib die Höhe des Dreiecks ein">

      <button type="submit" onclick="berechnen()">Berechnen</button>
    </form>
  </div>
</body>

</html>

Add `return false` in the onclick like `` See https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms — The fourth bird, Dec 19 '18 at 15:34
Do you really mean to be submitting a form? That is probably the source of your issue and it sounds like you just want to display some html output on a button click. — benvc, Dec 19 '18 at 15:38

MemeDeveloper · Answer 1 · 2018-12-19T22:11:19.923

So, you have the onclick on a submit button, which submits the form.

You see the change from your javascript, but then your form is posted to the server, refreshing the page, and the change is gone.

So add return false to the javascript method:

function berechnen() {
//...existing code 
    return false; 
}

and it should behave as you expect (i.e. without submitting the form)

Alternatively change the type=submit to button

Berechnen

score 0 · Answer 2 · answered Dec 19 '18 at 16:37

0

Try to change your button type to

submit

if you don't have any intention to submit and modify any data on the server side:

<button type="button" onclick="berechnen()">Berechnen</button>

answered Dec 19 '18 at 16:37

Willy David Jr

8,604
6
46
57

Issue with disappearing of pop up element after clicking button

2 Answers2