Javascript 未鏈接到 html 文件

Question

我有一個基本的 html 文件，我正在學習 Javascript。 我以為我的代碼和腳本的位置是正確的。 但是，當我在瀏覽器中加載文件時，所有腳本都不起作用。 我的 javascript 都是外部的。 這是我的 html 文件的內容：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <title> </title>
            <meta charset="utf-8">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
                </script>
                <script src="js/assignment01.js">
                </script>
                <script src="js/jquery-3.4.1.js">
                </script>

        </head>


 <body>

            <h1>Greetings</h1>
                <p>Hello, my name is <span id="first-name"></span> <span id="last-name"></span>!</p>
                <p>I am a student at <span class="mcc">Metropolitan Community College</span> in Omaha, Nebraska!</p>
                <p>My hobbies include: <br>
                    <ul>
                        <li id="hobby">Photography</li>
                        <li id="hobby">Videography</li>
                        <li id="hobby">Voice Over Acting</li>
                    </ul>
                </p>
        </body>
</html>

我的外部 javascript 文件包括：

$(document).ready (function (){});

$('#first-name').html("Scott");
$('#last-name').html("Fincham");

$('.mcc').css('color', 'blue', 'style', 'italic');

腳本應該插入我的名字和姓氏，然后用斜體將幾個單詞變成藍色。 我對學習 javascript 很陌生。 顯然，有些事情是錯誤的，但我只是沒有看到它，可以使用另一組眼睛（和更多經驗）。 任何見解將不勝感激！

Answer 1

請參見下面的示例，只需將 js 代碼放在您的外部文件中

將 js 代碼放在ready塊中，也在.css()更改如下

可能是您的代碼不起作用，因為您為外部 js 文件提供了錯誤的路徑，因此請檢查控制台是否存在404

在這里，我將.html( ) 更改為 . text()因為你只需要設置文本，你可以使用 . html()也

 $(document).ready (function (){ $('#first-name').text("Scott"); $('#last-name').text("Fincham"); $('.mcc').css( 'color', 'blue').css('font-style', 'italic'); });

 <!DOCTYPE html> <html lang="en"> <head> <title> </title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src="js/assignment01.js"> </script> <script src="js/jquery-3.4.1.js"> </script> </head> <body> <h1>Greetings</h1> <p>Hello, my name is <span id="first-name"></span> <span id="last-name"></span>!</p> <p>I am a student at <span class="mcc">Metropolitan Community College</span> in Omaha, Nebraska!</p> <p>My hobbies include: <br> <ul> <li id="hobby">Photography</li> <li id="hobby">Videography</li> <li id="hobby">Voice Over Acting</li> </ul> </p> </body> </html>

Answer 2

為什么要使用jquery多個腳本文件？

您可以使用唯一的jquery.min.js 。

我在代碼段中應用了代碼更改。

 $(document).ready(function () { $('#first-name').text("Scott"); $('#last-name').text("Fincham"); $('.mcc').css( 'color', 'blue').css('font-style', 'italic'); });

 <!DOCTYPE html> <html lang="en"> <head> <title> </title> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/assignment01.js"> </script> </head> <body> <h1>Greetings</h1> <p>Hello, my name is <span id="first-name"></span> <span id="last-name"></span>! </p> <p>I am a student at <span class="mcc">Metropolitan Community College</span> in Omaha, Nebraska! </p> <p>My hobbies include: </p><br> <ul> <li id="hobby">Photography</li> <li id="hobby">Videography</li> <li id="hobby">Voice Over Acting</li> </ul> </body> </html>

Answer 3

首先，檢查你的外部JS文件路徑是否正確。 你的整個 javascript 是正確的，但添加 CSS 方法是錯誤的。 您可以在類中添加多個 CSS。 請參閱下面的jQuery。

$('#first-name').html("Scott");
$('#last-name').html("Fincham");
$(".mcc").css({"color": "blue", "font-style": "italic"});

Javascript 未鏈接到 html 文件

問題描述

3 個解決方案

解決方案1
0 2019-12-07 04:45:50

解決方案2
0 2019-12-07 04:59:48

解決方案3
0 2019-12-07 05:20:03

Javascript 未鏈接到 html 文件

問題描述

3 個解決方案

解決方案1 0 2019-12-07 04:45:50

解決方案2 0 2019-12-07 04:59:48

解決方案3 0 2019-12-07 05:20:03

解決方案1
0 2019-12-07 04:45:50

解決方案2
0 2019-12-07 04:59:48

解決方案3
0 2019-12-07 05:20:03