Question

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

Answer 1

因此，您只需单击一个提交按钮即可提交表单。

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

因此将 return false 添加到javascript方法中：

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

，它的行为应符合您的期望（即不提交表单）

或者将type=submit更改为button

贝雷嫩

Answer 2

尝试将按钮类型更改为

提交

如果您无意在服务器端提交和修改任何数据：

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

单击按钮后

2 个答案: