How to place Javascript in a separate file from HTML

I have this code placed in index.html, all together – Javascript and HTML. what I want is to place the JS into another, separate file called “pw.js”.

I have created a blank JS file located in folder “js”. I have added it to (head) as well like this <script src="js/pw.js"></script>

This is what I have now in index.html, how to place the JS separatly? Please be specific in answers, I’m a beginner.

<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

your pw.js file in js folder:

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

your html file:

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