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>
Related
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 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>
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 3 years ago.
Improve this question
I'm trying to load jQuery library following videos but it does not work. When I'm trying to load some jQuery function, it writes that jquery is not defined. I also tried CDN.
<title>
GRID
</title>
<link rel="stylesheet" href="grid.css">
<link href="https://fonts.googleapis.com/css?
family=Ubuntu&display=swap" rel="stylesheet">
<script src="jquery-2.1.1.min.js"></script>
<script src="script.js"></script>
</head>```
You need to put jquery-2.1.1.min.js file into same location where your quoted file is if we are talking about local purposes.
If your prefer to download it each time, you can use for example Google Hosted Libraries in following way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Like so <script src="jquery-2.1.1.min.js"></script>, jquery have to be in the root of your domain, like your script.js.
If you want CDN, use:
<script rel="prefetch" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
Or official jQuery CDN:
<script
rel="prefetch"
src="https://code.jquery.com/jquery-2.1.1.min.js"
integrity="sha256-h0cGsrExGgcZtSZ/fRz4AwV+Nn6Urh/3v3jFRQ0w9dQ="
crossorigin="anonymous">
</script>
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
This is a small exercise in W3Schools that I wanted to try in my browser. The toggle animation did not work when I set the files separately, but it worked when I put the script within the HTML. Am I linking up the files wrong when they are separate? I also tried placing the script between the <head> tags, and that didn't work either.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"type="text/css"href="main.css"/>
</head>
<body>
<div class="container" onclick="myFunction(x)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script type="text/javascript"src="script.js"></script>
</body>
</html>
JS:
function myFunction(x){
x.classList.toggle("change")
}
Thank you!
The tag
<script type="text/javascript"src="script.js"></script>
should suffice IF you saved the Javascript file as "script.js" in the same folder as your HTML file.
Also notice that the following line doesn't have a context for x:
<div class="container" onclick="myFunction(x)">
Maybe you are trying to do something like:
<div class="container" onclick="myFunction(this)">