為什么 Javascript 文件鏈接在我的主 HTML 頁面中不起作用？

Question

建議將代碼應用到我自己研究的 header 上。 我檢查了我的大學講義，但找不到如何在外部表示我的 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>`

Javascript代碼------------------------------------>

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

Answer 1

您似乎已將 HTML 混合到您的 Javacript 文件中。 只需從您的 login.js 文件中刪除所有 HTML，包括<script>標記。 JS 文件應該只包含 JS。

Answer 2

您的瀏覽器嘗試解析 Javascript 文件的內容，但由於它作為 Javascript 代碼無效，因此無法解析。

概念驗證

（暫時）從 js/login.js 中刪除所有內容並在其中放入以下行：

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

加載您的 HTML 頁面。 你看到警告對話框了嗎？ 如果是，go 到下一節。 如果沒有，工作，直到你看到它。 您在開發工具控制台中看到了什么？ 你看到錯誤了嗎？ 如果是，那么該錯誤可能會告訴您找不到該文件。 在這種情況下，請檢查文件的訪問權限以及假定的位置與其實際位置。

真實的東西

現在您可以將 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;           
                }
            }
    }

為什么 Javascript 文件鏈接在我的主 HTML 頁面中不起作用？

問題描述

2 個解決方案

解決方案1
1 2021-05-22 13:46:16

解決方案2
1 2021-05-22 14:09:01

概念驗證

真實的東西

為什么 Javascript 文件鏈接在我的主 HTML 頁面中不起作用？

問題描述

2 個解決方案

解決方案1 1 2021-05-22 13:46:16

解決方案2 1 2021-05-22 14:09:01

概念驗證

真實的東西

解決方案1
1 2021-05-22 13:46:16

解決方案2
1 2021-05-22 14:09:01