JS code works fine within html file ,but when place it in external file it return Uncaught ReferenceError: Function is not defined

I have the following function that show/Hide the password field when needed :

 function showP() {
    var x = document.getElementById("passw");
    if (x.type === "password") {
      x.type = "text";
    } else {
      x.type = "password";
    }
  }

and place it in external js file and called from within the html page:

<script src="main.js"></script>

and this is the part in the html page where it is called:

Password:<br>
    <input type="password" name="password" required id="passw">
            <input type="checkbox" onclick="showP()"> 

when the function is placed inside the html page in script tag it works fine , but when called from external file it return :

Uncaught ReferenceError: showP is not defined at HTMLInputElement.onclick

so where it the problem ?

Regards