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  (div.style.display === "none") {
    div.style.display = "block";
    }
    else {
    div.style.display === "none" }
  }
  
  function closeEmail3(){
    if  (div.style.display === "block") {
    div.style.display = "none";
    }
  }
<table>
<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>
  <td>Date:

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

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

  </div>
  </td>
</tr>
</table>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top