为什么Javascript文件链接在我的主HTML页面中不起作用？_Javascript_Html

为什么Javascript文件链接在我的主HTML页面中不起作用？

javascript html

为什么Javascript文件链接在我的主HTML页面中不起作用？,javascript,html,Javascript,Html,建议将代码应用于我自己研究的标题。我查看了我的大学课堂讲稿，找不到如何在外部表示我的JS文件。文件名为login.js，位于名为js的文件夹中 HTML代码--------------------------------> `<!doctype html>  <html lang="en"> <h

建议将代码应用于我自己研究的标题。我查看了我的大学课堂讲稿，找不到如何在外部表示我的JS文件。文件名为login.js，位于名为js的文件夹中

HTML代码-------------------------------->

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

`<!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 == "user@gmit.ie" && 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>
`

`
运动区
Javascript登录表单验证
用户名：
密码：
注意：请使用以下用户名和密码
用户名：user@gmit
密码：通过
`

Javascript代码------------------------------------------>

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

`<!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 == "user@gmit.ie" && 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>
`

`
登录
//type=“text/javascript”
var=3；
函数验证（）{
//用于计算尝试次数的变量。
//单击“登录”按钮即可执行下面的函数。
var username=document.getElementById（“用户名”）.value；
var password=document.getElementById（“密码”）.value；
如果（用户名=”user@gmit.ie“&&password==“pass”）{
警报（“登录成功”）；
返回false；
}
否则{
尝试--；//递减一。
警报（“您已离开“+尝试+”尝试；”；
//尝试3次后禁用字段。
如果（尝试==0）{
document.getElementById（“用户名”）.disabled=true；
document.getElementById（“密码”）.disabled=true；
document.getElementById（“提交”）.disabled=true；
返回false；
}
}
}           
`

您似乎已将HTML混合到JavaScript文件中。只需从login.js文件中删除所有HTML，包括

标记。JS文件应该只包含JS。

您的浏览器试图解析Javascript文件的内容，但由于它作为Javascript代码无效，因此将无法解析

概念证明（暂时）从js/login.js中删除所有内容，并在其中放入以下行：

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

加载你的HTML页面。你看到警报对话框了吗？如果是，请转到下一节。如果没有，工作，直到你看到它。您在Dev工具控制台中看到了什么？你看到错误了吗？如果是，则该错误可能会告诉您找不到该文件。在这种情况下，请检查文件的访问权限及其假定的位置与实际位置

真实的东西现在，您可以将Javascript代码写入文件并执行了，让我们将真实代码放入该文件中

 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 == "user@gmit.ie" && 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;           
                }
            }
    }

尝试添加此

✅ 这个答案对我很有帮助。@SpagettiCode听到这个我很高兴。如果你的问题得到解决，你可以考虑接受这个帖子作为正确的答案。