Using jquery in js file - javascript

Okay so all I am trying to do is make the jquery work in my javascript file which is linked to a html file. I created a totally new file for this to test it. The whole contents of the html file are:
<!DOCTYPE html>
<html>
<script src="C:\Users\Me\Desktop\Programming\jquery-1.12.4" type="text/javascript"></script>
<script src="check.js"></script>
<head> <h1>test</h1>
</head>
<body>
</body>
</html>
And the whole content of the js file is
$("h1").css("color", "red");
But when I open the html file in chrome the change I put in the js file with jquery doesn't show up (e.g the heading is not red). I just want to figure out how to make it so that it does.
EDIT:
Thanks for the help everybody, I was able to make it work :)

did you try this?
$(document).ready(function(){
$("h1").css("color", "red");
});

not sure but, does your browser access local files directly? im pretty sure that browser sandbox gonna reject that, maybe cors plugin on chrome?
EDIT:
try importing this instead...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Move your <h1> tag to be in the <body>
Move your <script> tags to the <head>
Replace your code in your JS file with what imvain2 said, so
that the JS will load once your document is ready.
Make sure you are correctly referencing your jQuery script. You can even use this to test it out:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Try to use jQuery CDN, this way you don't need to worry if jQuery loaded correctly or not.
$(document).ready(function() {
$("h1").css("color", "red");
});
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="check.js"></script>
<head></head>
<body>
<h1>test</h1>
</body>
</html>

There are a couple issue as described in other posts. All your meta, script, css references, etc. should go int the <head> and never header tags. Also need to correctly reference your javascript files.
<head>
</head>
<body>
<header>
<h1>test</h1>
</header>
</body>
Example: JSFiddle

If you want to use jquery in .js file all you need to do is type: src=" ..." above code.

Related

Load div from external file using JQuery

I'm running into a problem with JQuery, I've read multiple threads about this but I cannot for the life of me figure out what is wrong with my code. I've gotten it down to a pretty simplistic version of what I was trying to do, but it still will not work. Here is the code that I'm trying:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('#content').load("import.html");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
and here is the page that I'm trying to import:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="test-div">
<p>This is some text.</p>
</div>
</body>
</html>
can somebody please point out what I might be doing wrong here?
The DOM is likely not fully loaded when the .load function is being run. Change to this.
<script>
$(document).ready(function() {
$('#content').load("import.html");
});
</script>
Note - as in the comment, this only works on a server.
It should ideally work. There must be some other issue
Check if jquery library file is loading correctly
HTML page name is import.html or not.
At last, Are you getting any error on console?

javascript jQuery code file not working when linked from HTML

hi I am new to Javascript and I am trying to use jQuery but it doesn't work if I'm using it on another js file, but if directly inputted into my HTML file it works.
Here is the try.js file:
$("#btn1").click(fn1);
function fn1(){
$("#heading1").fadeToggle();
}
and the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Javascript trial ANIMATIONS </title>
<script src="jquery.js"></script>
<script src="try.js" type='text/javascript'></script>
</head>
<body>
<h2 id="heading1">SETTING UP JQUERY</h2>
<button id="btn1">click me</button>
</body>
<HTML>
Also how can I see the library of jQuery while typing in another js file. I'm using vs code
May be you can use manipulation with dom when document will been load.
function fn1(){
$("#heading1").fadeToggle();
}
$(function() {
$("#btn1").click(fn1);
});
Check out responses to this question. You might get an idea on how to proceed.

linking JavaScript to HTML file

I am at my wits end with linking a javaScript file to my main.html, they are both in the same folder.
I have viewed multiple Stack overflow topics regarding this question, and for some reason none of the solutions solve my answer.
My current code is what I have below:
[main.html]
<!DOCTYPE html>
<head>
<link rel="javascript" href="jsfile.js">
<title>JavaScript</title>
</head>
<body>
<div class="Header">
<h1>JS Basics</h1>
</div>
</body>
[jsfile.js]
document.write("Hello World");
This code does not display the "Hello World" message, however if i insert the code directly into the HTML file it does.
I appreciate any and all help on this matter.
Add like following not with link.
<script type="text/javascript" src="jsfile.js"></script>
Just type:
<script src="yourJavascriptFilename.js"></script>
Most importantly add this line to the bottom of your body tag to avoid your browsing requesting JavaScript to be loaded before displaying your HTML.
You're using the incorrect link for JavaScript.
Try using this instead
<script src="jsfile.js"></script>

Implement JS in HTML

It should be easy,
but as easy as it should be I can't solve the problem.
If I'm typing the following HTML and JS code into an online editor,
everything works fine but if I'm typing this into my (offline) editor it won't work.
Here's the online code:
http://jsbin.com/kenurunahu/1/edit?html,js,output)
I bet it has something to do with the loading order and how the files are linked.
Thats how my (lokal) HTML-file looks like (where the files are linked):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
<script src="Script.js"></script>
</head>
<body>
<p id="demo">
something
</p>
</body>
</html>
Many Thanks for Help!
[Update]
Firefox and Chrome display the JS file. Sometimes I get an error message that says 'innerHTML is null', but if I write the same code into the console everything works fine.
you have the error when the js script is loaded before the html dom is fully loaded by the browser. A simple solution for your testing is to place the script include at the end of your html page, like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>
A better solution is to run your script only when the dom is fully loaded. For example with the body onload event :
<body onload="yourFunc()">
Or event better by using only js code, for example with jquery ready function or by writing a simple custom handler that should work on all major browsers :
document.addEventListener("DOMContentLoaded", function(event) {
//call your func here
});
Hope that helps.
A few guesses:
Capitalization is important. If the file is named script.js do not link to Script.js
Is your js file in the same folder as the index.html document? Because that is what you are saying.
Normally, we arrange our file structure something like this:
public_html
- css
- js
- img
- inc
If your styles/scripts are stored in sub-folders, such as js and css, then you must amend your references to:
<link rel="stylesheet" content="css/Index.css">
<script src="js/Script.js"></script>
As a good practice, your scripts should be placed at the closing of body tag. External scripts are blocking and hence it would make sense we do not put them at the top. Also, when your script placed at the top runs, your DOM may not be ready, which means any element your script is trying to access may not be present in DOM at all which results in your error.
Hence, all your scripts should be at the closing of body tag. That way when the script loads and runs, you can be assured that the DOM is ready.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>

jQuery selector not working in script but works in console

this is a very odd problem indeed and I hope it's simple. I cannot get a simple select and append to work in my html document, but it works when I'm in the chrome browser console.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="/js/script.js"></script>
<script>
$('[data-js="works"]').append("hello");
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
When I put that line of script in the console, hello appears above test. When I just open the page, test is there alone. I was running a script from this page earlier and when I tried to select an element it didn't work. I then went to inline script to see if it would even work there, no. I've seen if it works from inline script without the imported script, also no. Console has no bug information. I can print from that inline script to my console if I want, but this code still isn't running properly.
Doesn't work with my local httpserver and doesn't work just as a locally opened file.
This is because the script is executed before the page is loaded so the target div does not exist yet.
The solution is to wait for the page to be fully loaded before doing something.
The $ function can be used for this. Give it a callback and it will be executed once the page is loaded.
You can also use window.addEventListener("load", callback); that doesn't need jQuery.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script>
$(function(){
$('[data-js=works]').append("hello");
});
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
Another solution can be to insert your script at the end of the page. It is not as neat though in my opinion.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div data-js="works"></div>
test
<script>
$('[data-js=works]').append("hello");
</script>
</body>
</html>
Try the following, hope it will solve your problem
(function($) { // This will solve namespace problem (if any)
// Write your JQuery code here
})(jQuery);
Either you put the .js file at the end of the body or put your JS code between $(document).ready(function(){ //code inside })

Categories