CODEWITHSUNDEEP
javascripthtml
SpagettiCode
SpagettiCode

Reputation: 31

Why is the Javascript file link not working in my main HTML page?

It is recommended to apply the code to the header from my own research. I checked my college lecture notes and I could not find how to represent my JS file externally. The filename is login.js which is in a folder called js.

HTML code ----------------------------------------->

`<!doctype html>    <!-- This is a boostrap CDN template Bootstrap 4.6 version -->
<html lang="en">

    <head> 
    <title>SportZone</title>  
    <script type="text/javascript" src="js/login.js">
    </head>
    
    <body>
     
        <div>
          <a class="active" href="#home">Home</a>
          <a href="#news">News</a>
          <a href="#contact">Contact</a>
          <a href="#about">About</a>
        </div>
        
        
        <div class="container">
        <div class="main">
        <h2>Javascript Login Form Validation</h2>
        <form id="form_id" method="post" name="myform">
        <label>User Name :</label>
        <input type="text" name="username" id="username"/>
        <label>Password :</label>
        <input type="password" name="password" id="password"/>
        <input type="button" value="Login" id="submit" onclick="validate()"/>
        </form>
        <span><b class="note">Note : </b>use the following username and password. <br/><b class="valid">User Name : user@gmit<br/>Password : pass</b></span>
        </div>
        </div>

</body>
</html>`

Javascript code------------------------------------>

`<!doctype html>
<html lang="en">
    <head>
        <title>Login</title>
    </head>
    <body>
    
    </body>
    </html>
    //type="text/javascript"
    <script type="text/javascript" src="login.js">
     var attempt = 3; 
            function validate(){
                            // Variable to count number of attempts.
                        // Below function Executes on click of login button.
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            if ( username == "[email protected]" && password == "pass"){
            alert ("Login successfully");
            return false;
                }
                else{
                attempt --;// Decrementing by one.
                alert("You have left "+attempt+" attempt;");
                // Disabling fields after 3 attempts.
                if( attempt == 0){
                document.getElementById("username").disabled = true;
                document.getElementById("password").disabled = true;
                document.getElementById("submit").disabled = true;
                return false;           
                    }
                }
        }           
    </script>
`

Upvotes: 1

Views: 1345

Answers (2)

James Hill
James Hill

Reputation: 61812

It appears that you've mixed HTML into your Javacript file. Simply remove all of the HTML, including the <script> tag, from your login.js file. JS files should only contain JS.

Upvotes: 1

Lajos Arpad
Lajos Arpad

Reputation: 76574

Your browser tries to parse the content of your Javascript file, but since it's invalid as a Javascript code, will fail to do so.

Proof-of-concept

(Temporarily) remove EVERYTHING from js/login.js and put in there the following line:

alert("I'm a robot from the future! Beep! Beep!");

Load your HTML page. Do you see the alert dialog? If yes, go to the next section. If not, work, until you see it. What do you see in the Dev Tools Console? Do you see an error? If yes, then that error might be telling you that the file was not found. In that case check the access rights of the file and the location it is assumed to be at vs. its actual location.

The real thing

Now that you are able to write Javascript code into your file and that's executed, let's put in your real code into that file

 var attempt = 3; 
        function validate(){
                        // Variable to count number of attempts.
                    // Below function Executes on click of login button.
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        if ( username == "[email protected]" && password == "pass"){
        alert ("Login successfully");
        return false;
            }
            else{
            attempt --;// Decrementing by one.
            alert("You have left "+attempt+" attempt;");
            // Disabling fields after 3 attempts.
            if( attempt == 0){
            document.getElementById("username").disabled = true;
            document.getElementById("password").disabled = true;
            document.getElementById("submit").disabled = true;
            return false;           
                }
            }
    }

Upvotes: 1

Related Questions