popup displays and dissapears immediately after button is clicked

I want to make a popup for my project so I decided to follow a w3schools tutorial but I'm running into a problem. When I click the button to show the modal it appears and immediately disappears.

var btn = document.getElementById("btn");

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

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

<div class="modal" id="myModal">
  <div class="container">
    <div class="input-container">
      <h1>Search Product</h1>
      <input type="text" name="search" id="search" placeholder="Search">
      <div class="results-container">
        <table aria-label="">
          <thead>
            <tr>
              <th id="number">No.</th>
              <th id="product">Product</th>
              <th id="desc">Description</th>
              <th id="qty">Qty</th>
              <th id="price">Price</th>
            </tr>
          </thead>
          <tbody id="result"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

I tried removing some js code in the hope it would show itself but I found nothing and in Firefox's debugging tool i tried modal.style.display = "block"; that worked and it stayed, but not when I use a button to display the popup.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/dhNjQMu