javascript jQuery code file not working when linked from HTML - javascript

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.

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?

Using jquery in js file

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.

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>

Calling javascript script from html

I have a simple javascript file like so:
$(document).ready(function () {
alert("my controller");
});
I have an HTML file like so:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/js/generateLineupController.js"></script>
</body>
</html>
for the love of all things holy why in the world would the alert not show? I get a 200 on GET for the javascript file, so it's loading.
Several problems here.
You're trying to load the script twice for some reason. Don't do that. Load it in <head>, or at the end of <body>, but not both.
You're trying to use jQuery syntax ($(...)), but you haven't loaded the jQuery library. You'll need that.
The $(document).ready(...) indicates that you are trying to use jQuery, but you aren't loading jQuery in your page. Check your console log; you will see the errors there.
Also, there's no need to load the script twice with two <script> tags; just load it once.

sample HTML to test javascript codes

I have just started learning Javascript and Ok here is a code I want to try and see it in the browser, so I create a test.js file and put this in it:
function useless(callback) {
return callback
}
var text = 'Amigo';
assert(
useless(function(){ return text; }) === text,
"The useless function works! " + text);
But still there is more, I should write a minimum HTML page than can call this function, What is sample HTML to host this method in it?
I have written something like this but still there is something wrong with it:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="hehe.js" >
useless('Amigo');
window.onload=useless('Amigo')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="hehe.js"></script>
<script >
useless('Amigo');
window.onload=useless('Amigo')
</script>
</body>
</html>
You can load the source in a separate script from the inline one that you call it in. Note that this assumes that hehe.js is in the root directory of your site.
For testing js in general jsFiddle is a nice resource that lets you define your html/js/css and experiment with small changes without having to write out all the files.

Categories