單擊按鈕后彈出元素消失的問題

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

Berechnen

Answer 2

嘗試將按鈕類型更改為

提交

如果您無意在服務器端提交和修改任何數據：

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

單擊按鈕后彈出元素消失的問題

問題描述

2 個解決方案

解決方案1
1 2018-12-19 15:48:43

解決方案2
0 2018-12-19 16:37:26

單擊按鈕后彈出元素消失的問題

問題描述

2 個解決方案

解決方案1 1 2018-12-19 15:48:43

解決方案2 0 2018-12-19 16:37:26

解決方案1
1 2018-12-19 15:48:43

解決方案2
0 2018-12-19 16:37:26