时间戳

首页 > 解决方案 > 单击按钮后弹出元素消失的问题

javascript - 单击按钮后弹出元素消失的问题

问题描述

所以我正在做一个学校项目。目标是在 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>

标签： javascripthtmlcssgetelementbyid

解决方案

因此，您可以单击提交按钮，提交表单。

您从 javascript 中看到更改，但随后您的表单被发布到服务器，刷新页面，更改消失了。

所以将return false添加到 javascript 方法中：

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

它应该像您期望的那样运行（即不提交表单）

或者更改type=submit为button

贝雷钦

推荐阅读