Adding External Javascript file to Html Code Exported from codepen

Question

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>

Answer 1

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