将外部 Javascript 文件添加到从 codepen 导出的 Html 代码

Question

所以这是我使用 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>

Answer 1

使用脚本标签。

添加内联代码：

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

脚本通常包含在索引文件正文底部的结束正文标记之前

将外部 Javascript 文件添加到从 codepen 导出的 Html 代码

Adding External Javascript file to Html Code Exported from codepen

html

javascript

css

codepen