JavaScript function will open div tag; second JavaScript function does not close it however

Your code isn’t working because of event bubbling

I’ve updated your code to be more legible by putting your element in a var

 var div = document.getElementById("email3");

Changing your button element to this will stop the default functionality

<button onclick="closeEmail3();event.stopPropagation()">Close</button>

Run the snippet below to see it in action.

var div = document.getElementById("email3");
 function openEmail3(){
    if  ( === "none") { = "block";
    else { === "none" }
  function closeEmail3(){
    if  ( === "block") { = "none";
<tr class="foo" onclick="openEmail1();">...</tr>
<tr class="foo" onclick="openEmail3();"> <!-- this opens fine-->
  <td>From: Me</td>
  <td>Subject: Why won't this work?</td>

  <div style="display: none" id="email3"> popup..

    <div>...header box in email popup...</div>
    <div> body box in email popup...</div>
      <button onclick="openForm();">Forward</button> <!-- this works fine-->
      <button onclick="closeEmail3();event.stopPropagation()">Close</button> <!-- does not work-->


CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top