javascript - Why do i have to click twice to open a modal?

Question

I am trying to make a button on which if we click a popup opens(modal) and it is working but only problem is i need to click it twice to open it and i don't see how can i solve it.

// Get the modal
function modal1() {

  var modal = document.getElementById("myModal");

  // Get the button that opens the modal
  var btn = document.getElementById("myBtn");

  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];

  // When the user clicks the button, open the modal 
  btn.onclick = function() {
    modal.style.display = "block";
  }

  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<!-- Trigger/Open The Modal -->
<button id="myBtn" onclick="modal1()">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

Answer 1

It's fairly straightforward if you read your code in order.

• When you click the button, it runs the modal1() function.
• This function, among other things, adds a btn.onclick listener, waiting for a click.

That's it.

So now, you have to click a second time in order to trigger the listener you just created.

The new onclick listener you create, for that matter, overrides the current onclick on the button, and I'm not sure why you do this.

The simple solution is to put modal.style.display = "block" directly in modal1(). Why override the onclick function?

function modal1() {
    modal.style.display = "block";
}