show/hide fieldset in HTML is not working

Question

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>

Add `type="button"` to your button, buttons are of type `submit` by default which is reloading your page on click. ` — pilchard, Nov 22 '21 at 15:37
add type="button" here is the working code link https://stackblitz.com/edit/web-platform-cf1rah?file=index.html — Vasim Hayat, Nov 22 '21 at 15:43

Swapnil Soni · Answer 1 · 2021-11-22T15:41:41.427

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>

show/hide fieldset in HTML is not working

1 Answers1