Changing CSS Display property with Javascript but keeps disappearing

Question

I have a div element in my page which I want to make visible only upon the click of a button. This works as expected, except the div promptly disappears again and I cannot get it to remain visible.

    function btnAddItem_Click() {
            document.getElementById("add-item-popup").style.display = "block"
        }

    .add-item-popup {
        width: 400px;
        height: 550px;
        display: none;
        background-color: #ededed;
        position: fixed;
        right: 40%;
        top: 20%;
    }

    <div class="add-item-popup" id="add-item-popup">
        //Contains a form
    </div>





    <button onclick="btnAddItem_Click()">Add Item</button>

@AhmedsaysReinstateMonica The div appears as expected for a second and then disappears again — Brandon Holz
– Brandon Holz, Commented Jan 17, 2020 at 13:36
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Reproducible Example — Paulie_D
– Paulie_D, Commented Jan 17, 2020 at 13:37
as I have edited your question this is not happening. Check other libraies — Ahmed Ali
– Ahmed Ali, Commented Jan 17, 2020 at 13:38

GetSet · Accepted Answer · 2020-01-17 13:46:48Z

2

I'm going to make a reasonable assumption but an assumption nonetheless with this solution. The assumption is your <button> tag with your onclick handler is inside of another form. If so, replace this line here:

<button onclick="btnAddItem_Click()">Add Item</button>

To become this code:

<button type="button" onclick="btnAddItem_Click()">Add Item</button>

Explanation: When button is inside a form without type="button" specified, it will submit the form, and in your case, reload the page where the css then of course is anew. Thus you only see a "blip" of the displayed div.

answered Jan 17, 2020 at 13:46

GetSet

1,5772 gold badges10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rameez Bukhari · Accepted Answer · 2020-01-17 14:17:58Z

1

Use This Code your issue is resolved.

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

answered Jan 17, 2020 at 14:17

Rameez Bukhari

4862 silver badges6 bronze badges

Collectives™ on Stack Overflow

Changing CSS Display property with Javascript but keeps disappearing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related