-1

So this is My Code Using Codepen. I Tried Executing it outside Codepen In Local Browser But its not working. Can Anyone Explain What is Wrong With it. I tried Adding Script containing path of external javascript file containing below code, which shows pop up dialogue box when clicked in Head Tag but it didn't work out.

document.getElementById("open-popup-btn").addEventListener("click",function(){
  document.getElementsByClassName("popup")[0].classList.add("active");
});

document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
  document.getElementsByClassName("popup")[0].classList.remove("active");
});
<div class="popup center">
  <div class="icon">
    <i class="fa fa-check"></i>
  </div>
  <div class="title">
    Success!!
  </div>
  <div class="description">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nihil provident voluptatem nulla placeat
  </div>
  <div class="dismiss-btn">
    <button id="dismiss-popup-btn">
      Dismiss
    </button>
  </div>
</div>
<div class="center">
  <button id="open-popup-btn">
    Open Popup
  </button>
</div>
Abhishek Agashe
  • 56
  • 5

1 Answers1

0

Use a script tag.

Either add your code inline:

<script type="text/javascript">
document.getElementById("open-popup-btn").addEventListener("click",function(){
  document.getElementsByClassName("popup")[0].classList.add("active");
});

document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
  document.getElementsByClassName("popup")[0].classList.remove("active");
});
</script>

Or include the path to your file relative to the index:

<script src='script.js'></script>

Scripts are typically included at the bottom of the body of your index file before the closing body tag

David_2002
  • 99
  • 8
  • 1
    Also if you export your codepen to a zip, it will build it for you, under the dist folder – David_2002 Oct 07 '20 at 16:01
  • Thanks Man I was Adding the path in head tag as given everywhere in the internet, I was unable to understand y it wont work now its working fine. – Abhishek Agashe Oct 08 '20 at 03:20