如何将 Javascript 放在与 HTML 不同的文件中

Question

我将此代码放在 index.html 中，全部放在一起 - Javascript 和 HTML。 我想要的是将 JS 放入另一个名为“pw.js”的单独文件中。

我在文件夹“js”中创建了一个空白的 JS 文件。 我已经将它添加到 (head) 以及像这样<script src="js/pw.js"></script>

这就是我现在在 index.html 中的内容，如何单独放置 JS？ 请具体回答，我是初学者。

<script type="text/javascript">
  function isValid(){
    var password = document.getElementById('password').value;
    if (password == "123")
      top.location.href="./file.pdf";
    else
      {window.location.reload();}
  }
</script>

<div class="field_pw">
  <form name="PasswordField" action="">
    Password:
    <input type="password" id="password" name="password" class="noborder" style="font-size: 25px">
    <input type="button" class="button_pw" value="download" onclick="isValid();">
  </form>
</div>

Answer 1

您在 js 文件夹中的 pw.js 文件：

function isValid() {
    var password = document.getElementById('password').value;
    if (password == "123")
        top.location.href="./file.pdf";
    else 
        window.location.reload();
}

你的 html 文件：

<script type="text/javascript" src="js/pw.js"></script>
<div class="field_pw">
    <form name="PasswordField" action="">
        Password:
        <input type="password" id="password" name="password" class="noborder" style="font-size: 25px">
        <input type="button" class="button_pw" value="download" onclick="isValid();">
    </form>
</div>