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