将外部Javascript文件添加到从Codepen导出的HTML代码中

问题描述

这是我的使用Codepen的代码。我尝试在本地浏览器的Codepen外部执行它，但是它不起作用。任何人都可以解释这是怎么回事。我尝试添加包含以下代码的外部javascript文件路径的添加脚本，单击Head Tag时会显示弹出对话框，但没有成功。

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>

解决方法

使用脚本标签。

直接内联添加代码：

<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>

或包含相对于索引的文件路径：

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

脚本通常包含在索引文件的主体底部，位于结束body标记之前

codepen html javascript