Проблема с исчезновением всплывающего элемента после нажатия кнопки - PullRequest
Новая
       9

Проблема с исчезновением всплывающего элемента после нажатия кнопки

0 голосов
/ 19 декабря 2018

так что я работаю над школьным проектом.Цель состоит в том, чтобы вычислить поверхность треугольника в javascript и отобразить результаты в html.Я создал форму для ввода значений переменных g и h.

Теперь я хочу заменить текст заголовка на getelementbyid , но каким-то образом он всплывает и исчезает, когда я нажимаю кнопку.Попробуйте сами и дайте мне знать, что я делаю неправильно.

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>

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Попробуйте изменить тип кнопки на

представить

, если у вас нет намерения отправлять и изменять какие-либо данные на стороне сервера: 

<button type="button" onclick="berechnen()">Berechnen</button>
0 голосов
/ 19 декабря 2018

Итак, у вас есть кнопка «Отправить», которая отправляет форму.

Вы видите изменение в своем javascript, но затем ваша форма публикуется на сервере, обновляется страница, и изменения исчезают.

Поэтому добавьте return false к методу javascript: 

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

, и он должен вести себя так, как вы ожидаете (то есть без отправки формы)

В качестве альтернативы можно изменить type=submit на button

Berechnen

...