CODEWITHSUNDEEP
javascripthtmlcss
Jack
Jack

Reputation: 15

All Elements in Div Not Appearing when Display is Set from None to Block

I am trying to make a popup that will appear when a user completes a certain task. This popup should contain a link saying Close (allowing them to close the popup) whenever it appears. My problem is that when the display is set from none to block, the link does not show up although it is inside the div.

function closePopup() {
  document.getElementById("popup").style.display = "none";
}

function openPopup() {
  document.getElementById("popup").style.display = "block";
  document.getElementById('popup').innerHTML = 'This is the popup';
}
#popup {
  display: none;
  padding: 1.5% 0 1.5% 0;
  background-color: #afcb59;
  width: 40%;
}
<body>
  <div id="popup">
    <a href="#" onclick="closePopup()">Close</a>
    <p></p>
  </div>
  <a href="#" onclick="openPopup()">Open</a>
</body>

Upvotes: 1

Views: 71

Answers (3)

Muhammad Asif
Muhammad Asif

Reputation: 526

I have modified your script little bit, Added two more functionalities in closePopupfunction and same been done in openPopup function according, also have updated body tags in order to reflect the changes according to your needs.

    function closePopup() {
  document.getElementById("popup").style.display = "none";
   document.getElementById("closepoup").style.display = "block";
   document.getElementById('closepoup').innerHTML = '  <a href="#" onclick="openPopup()">Open</a>';
}

function openPopup() {
  document.getElementById("popup").style.display = "block";
  document.getElementById('popup').innerHTML = '  This is the popup';
  document.getElementById('closepoup').innerHTML = '  <a href="#" onclick="closePopup()">Close</a>';     
}
#popup {
  display: none;
  padding: 1.5% 0 1.5% 0;
  background-color: #afcb59;
  width: 40%;
}
 <body>
 <div id="closepoup">
  <a href="#" onclick="openPopup()">Open</a>
  </div>
  <div id="popup"></div>
 
</body>

Upvotes: 0

Code Maniac
Code Maniac

Reputation: 37755

You need to add innerHTML to that paragraph not the div.

function closePopup() {
  document.getElementById("popup").style.display = "none";
}

function openPopup() {
  document.getElementById("popup").style.display = "block";
  document.getElementById('text').innerHTML = 'This is the popup';
}
#popup {
  display: none;
  padding: 1.5% 0 1.5% 0;
  background-color: #afcb59;
  width: 40%;
}
<body>
  <div id="popup">
    <a href="#" onclick="closePopup()">Close</a>
    <p id="text"></p>
  </div>
  <a href="#" onclick="openPopup()">Open</a>
</body>

Upvotes: 1

Dawood Shahid
Dawood Shahid

Reputation: 62

function closePopup() {
  document.getElementById("popup").style.display = "none";
  document.getElementById("open_popup").style.display = "block";
}

function openPopup() {
  document.getElementById("popup").style.display = "block";
  document.getElementById("open_popup").style.display = "none";
  document.getElementById('popup_text').innerHTML = 'This is the popup';
}
#popup {
  display: none;
  padding: 1.5% 0 1.5% 0;
  background-color: #afcb59;
  width: 40%;
}
<body>
  <div id="popup">
    <p id="popup_text"></p>
    <a href="#" onclick="closePopup()">Close</a>
  </div>
  <a id="open_popup" href="#" onclick="openPopup()">Open</a>
</body>

Upvotes: 0

Related Questions