Javascript not linking to html file
Question
I have a basic html file where I'm learning Javascript. I thought I had the code and placement of the script correct. However, when I load the file in a browser, none of the script works. My javascript is all external. Here's what I have for my html file:
<!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>
My external javascript file consists of this:
$(document).ready (function (){});
$('#first-name').html("Scott");
$('#last-name').html("Fincham");
$('.mcc').css('color', 'blue', 'style', 'italic');
The script is supposed to insert my first and last name, and then make a few words blue in italics. I am very new to learning javascript. Obviously, something is wrong but I'm just not seeing it and could use another set of eyes (and more experience). Any insight would be appreciated!
3 answers
solution1
0 2019-12-07 04:45:50
See below example, just place below js code in your external file
Put js code inside ready block, also change in .css() as below
May be your code not working because you given wrong path for external js file, so check in console if is there 404
Here i changed .html( ) to . text() because you need to set just text, you can use . html() also
$(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>
solution2
0 2019-12-07 04:59:48
Why are you use multiple script files of jquery ?
You can use the only jquery.min.js .
I has applied changes of code in the snippet.
$(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>
solution3
0 2019-12-07 05:20:03
First, check if your external JS file path is correct or not. Your Whole javascript is correct but to add the CSS method is wrong. You can add multiple CSS in the class. See below jQuery.
$('#first-name').html("Scott");
$('#last-name').html("Fincham");
$(".mcc").css({"color": "blue", "font-style": "italic"});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.