Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I'm struggling to get javascript file linked to HMTL. I've made sure that the HTML & javascript file are saved as 'index.html' & 'script.js', and saved them in the same folder. But when trying to access the html file in Chrome, the javascript doesn't appear, either in Console of the Dev Tool.
Please see below the code I'm writing in Sublime Text. Could you please advise me what I'm doing wrong here? Thanks a lot !
<!DOCTYPE html> <html>
<head>
<title>JavaScript</title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<h1>Javascript in HTML</h1>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Going off the comments, the code console.log("hello"); will display "hello" in the console of your browser, not in the body of your HTML page. This is often accessed by tapping the F12 key.
If you want your text to show up in the HTML, you need to give it an HTML element for the text to be displayed, then use JavaScript to find the element and update the text.
document.getElementById("textGoesHere").innerText = "hello";
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<link rel="stylesheet" type="text/css" href="#">
<script src="script.js"></script>
</head>
<body>
<h1>Javascript in HTML</h1>
<div id="textGoesHere" />
</body>
</html>
The caveat to that is you can't run the JavaScript correctly until the HTML is generated, so declaring it in the HEAD tag, like people tend to do, you need to put the JavaScript in a method, then call that method from the BODY event of onload.
<body onload="UpdateText()">
function UpdateText()
{
document.getElementById("textGoesHere").innerText = "hello";
}
Since this is fairly basic JavaScript and HTML, I'm going to suggest you use a tutorial to get started programming, such as:
https://www.codecademy.com/learn/introduction-to-javascript
It's much easier to learn the basics from a course than try to stumble your way through, trying to learn piecemeal by banging your head on everything. I have some experience in doing both. Believe me, a tutorial/class is less painful. ;-)
try out this
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<h1>Javascript in HTML</h1>
<script src="script.js"></script>
</body>
</html>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 days ago.
Improve this question
When I open the html code with "Open with Live Server", it does not include my css code.
What did I miss? What did I do wrong?
How do I make my css code work with html?
Screenshots:
This is my css code
This is my html code
I followed the tutorial "CSS Tutorial - Full Course for Beginners"
I followed what he was doing but it seems I got it wrong. I did the whole thing over again but still not working.
p {
font-size: 64px;
color: red;
}
<IDOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link ref="stylesheet" href="style.css">
</head>
<body>
<p>I'm currently learning CSS!</p>
</body>
</html>
You've got a typo in your html it should be rel= not ref=
<link rel="stylesheet" href="css/style.css">
#1 Rule: always first check for typos before thinking that something isn't working functionally.
Having the attention to detail to observe and detect your typos is very important if you want to learn to code (there wasn't that much to sift through in this case, you should have been able to see it)
Also, we understand because you're new, but next time paste all your code with proper formatting instead of links to images - it's much easier for us to help you if we are at least able to work with text.
Hope this helps.
If you have written the css file in a separate page then you have to use link tag and link it with the html in the head tag enter code here
Here is the syntax:
<head
<link rel="stylesheet"href="mystyle.cs>
</head>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
This question has been asked ~10^4 times, but hear me out that I've done my due dilligence in reading the solutions and seeing if their tweaks fix things (to no avail). I'm an amateur when it comes to JS/CSS/HTML but I'm learning. I am trying to implement this sticky navigation bar from here (also see here). My question isn't about their code, which appears to be fine.
When I implement it, my .html file doesn't seem to be using the .js script at all. None of the buttons respond, I don't get any errors, but everything in the .css and .html files otherwise are rendering fine. The head:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
...
</html>
The script.js should be in the correctly referenced directory.
Answer (as I was writing this): The jquery script and the custom script were in the wrong order. :)
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
Here is my html linking the .js file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/Style.css">
<title>
Learning JavaScript
</title>
</head>
<body>
<div class="LargeTitle">
<h1>Learning JavaScript</h1>
<p class="UnderText">asap</p>
</div>
</body>
<script scr="Scripts/MainJavaScript.js"></script>
</html>
and here is a picture of the file locations
File Location = http://imgur.com/yCpEzbN
and here is the script:
alert("Is it working?");
Hopefully someone can help me with this
You have a typo, change <script scr="Scripts/MainJavaScript.js"></script> to <script src="Scripts/MainJavaScript.js"></script>
The attribute for script should be src instead of scr
Also, put the script tag inside the body tag or the head tag
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I'm tryna use Jquery MObile. So instead of using CDN, I've used the folloging code in my html page
<head>
<link rel="stylesheet" href="JqueryFiles\jquery.mobile-1.4.5.min.css">
<script src="JqueryFiles\jquery.mobile-1.4.5.min.js"></script>
<script src="JqueryFiles\jquery.js"></script>
</head>
It does not seems to work. Jquery, Jquery Mobile or even the css file are not rendred in my web page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="JqueryFiles\jquery.mobile-1.4.5.min.css">
<script src="JqueryFiles\jquery.mobile-1.4.5.min.js"></script>
<script src="JqueryFiles\jquery.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>FIRST PAGE</h1>
</div>
<div data-role="main" class="ui-content">
<h1>HELLO WORLD</h1>
<p>Welcome </p>
</div>
<div data-role="footer">
<h2>© Test</h2>
</div>
</div>
</body>
</html>
Do you guyyz know why it's not working ? (from what I've understood so far there should be some styling on the header and the footer. But this is not working here
PS: I've tried with CDN and it works with CDN BUT I dont want to use CDN as I'm coding for a local application only
ScreenShot ofmy JqueryFolder
Console Error ScreenShot
This appears to be because you are using forward slashes "\" instead of backslashes "/".
From our comment discussion we can also see that the scripts are loading in the wrong order.
Jquery Mobile needs Jquery (main) to run and so the latter (Jquery) needs to be loaded first.
So...
This:
<head>
<link rel="stylesheet" href="JqueryFiles\jquery.mobile-1.4.5.min.css">
<script src="JqueryFiles\jquery.mobile-1.4.5.min.js"></script>
<script src="JqueryFiles\jquery.js"></script>
</head>
should be this:
<head>
<link rel="stylesheet" href="JqueryFiles/jquery.mobile-1.4.5.min.css">
<script src="JqueryFiles/jquery.js"></script>
<script src="JqueryFiles/jquery.mobile-1.4.5.min.js"></script>
</head>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am new to programming and going through a "Beginning Programming" book. It lists the following code to write basic lines on a website:
<!DOCTYPE html>
<html>
<body>
<h1>This is a Test</h1>
<script>
document.write("<p>I like to code</p>");
document.write("<p>I will succeed at coding</p>");
</script>
</body>
</html>
Unfortunately, the line
document.write("<p>I like to code</p>");
does not give the desired output of "I like to code" written on the website.
How should this be written to get this output?
Your code seems to be running fine. Try updating your HTML file to this:
<!DOCTYPE html>
<html>
<body>
<h1>This is a Test</h1>
<script>
document.write("<p>I like to code</p>");
document.write("<p>I will succeed at coding</p>");
</script>
<noscript>
Javascript is disabled!
</noscript>
</body>
</html>
and if you see "Javascript is disabled!" then you'll need to allow your browser to use javascript.
Good luck :)
<!DOCTYPE html>
<html>
<body>
<h1>This is a Test</h1>
<script>
document.write("<p>I like to code</p>");
document.write("<p>I will succeed at coding</p>");
</script>
</body>
</html>
Seems to be running fine. Copy pasted same code