gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 06:40:20 24 4
gpt4 key购买 nike

所以我正在做一个学校元素。目标是在 javascript 中计算三 Angular 形的表面并在 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>

最佳答案

因此,您在提交表单的提交按钮上单击了 onclick。

您从您的 javascript 中看到了变化,但是随后您的表单被发送到服务器,刷新了页面,变化就消失了。

所以在javascript方法中加入return false:

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

它应该像你期望的那样运行(即不提交表单)

或者将 type=submit 更改为 button

先行

关于javascript - 单击按钮后弹出元素消失的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53854408/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com