I try to hide an Fieldset initially and then show it with an button click. But its just show me the text for a second and then its gone again.
I tried to do it also with visibility attribute but I got the same problem.
Is there something I do wrong?
function myFunction() {
var f1 = document.getElementById("f1");
f1.style.display = "block";
}#f1 {
display: none;
}
#btn_submit {
width: 23em;
height: 4em;
font-weight: bold;
background-color: #C6C5C5;
}<body style="background-color:#A0A0A0;">
<form action="" method="post">
<br>
<div class="a">
<h1>onfiguration / Configuration</h1><br>
<p>
<font size="6">(9) Relais 1 / Relay 1</font><br>
</p>
<fieldset id="f1"><br>
<font size="4">9.1 Modus / Mode:</font><br><br>
</fieldset>
<button onclick="myFunction()" id="myBtn">Read more</button>
</body>You forgot to close <form> tag.
Another thing, You've set button inside a form element which works as a submit button by default. You've to provide the type="button" to prevent form submission.
Also, Properly put <meta> tags in <head> and style and script tag before and after body respectively.
<!DOCTYPE html>
<html>
<head>
<title>Konfiguration / Configuration</title>
<meta charset="UTF-8">
<link rel="icon" href="data:;base64,=">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
#f1 {
display: none;
}
#btn_submit {
width: 23em;
height: 4em;
font-weight: bold;
background-color: #C6C5C5;
}
</style>
<body style="background-color:#A0A0A0;">
<form action="" method="post">
<br>
<div class="a">
<h1>onfiguration / Configuration</h1><br>
<p>
<font size="6">(9) Relais 1 / Relay 1</font><br>
</p>
<fieldset id="f1"><br>
<font size="4">9.1 Modus / Mode:</font><br><br>
</fieldset>
<button onclick="myFunction()" id="myBtn">Read more</button>
</div>
</form>
<script>
function myFunction() {
var f1 = document.getElementById("f1");
f1.style.display = "block";
}
</script>
</body>
</html>