I wrote a tiny piece of script. It's working when I add it directly into my page. But how do I make it working when the script is in a .js file? And is it enough to put the code into a .js file? Or do I need to add extra lines of code?
I know I have to refer to the file in the header. But that doesn't do the trick. This is the script:
$("#david").mouseover(function() {
$('#charlotte').addClass('hover');
$('#timon').addClass('hover');
}).mouseout(function() {
$('#charlotte').removeClass('hover');
$('#timon').removeClass('hover');
});
$("#charlotte").mouseover(function() {
$('#david').addClass('hovert');
$('#timon').addClass('hovert');
}).mouseout(function() {
$('#david').removeClass('hovert');
$('#timon').removeClass('hovert');
});
$("#timon").mouseover(function() {
$('#david').addClass('hovertt');
$('#charlotte').addClass('hovertt');
}).mouseout(function() {
$('#david').removeClass('hovertt');
$('#charlotte').removeClass('hovertt');
});
I hope you guys can help me out!
I know it's a very basic question, but I can't find the answer I need and I'm still a noob at making scripts..
Within the your HTML document add the second line after your jQuery script.
<script src="/js/jquery.js"></script>
<script src="/js/name-of-your-file.js"></script>
In the example, I've prepended /js/ to your scripts. It's best practice to separate your files into specific folders, so you'll have to create a new js folder. Also, jQuery needs to be in place and ready for you to start using it. If you need to wait for the document to load then you'll need to wrap your code in the following.
$(function() {
// Past your code here.
// This syntax is simply a shortcut for
// $(document).ready(function(){});
});
First of all you will need to include that javascript file in your html page:
<script src="yourscript.js"></script>
or
<script src="pathToYourScript/yourscript.js" type="text/javascript"></script>
furthenrmore you will need to tell the js when to execute and I would recomend either wrapping your code in
$(document).ready(function{
// your code here
})
or in window.load
$(window).load(function{
// your code here
})
or in self executing function :
(function(){
// your code here
})();
Related
Problem:
I need to add the javascript between script tags to seperate .js files.
I also don't know how to link src='https://code.jquery.com/jquery-3.3.1.js' in the .js file.
What I've tried:
Whenever I try to put the content between the tags into a seperate .js file i get errors.
The error messages: https://i.postimg.cc/L8b2X0c4/errormsg.png
The code:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
})
</script>
What I want to happen:
I want the script written in HTML file between script tags to work in seperate .js file. So i can link multiple other scripts to my html.
Thanks in advance!
You're correct that you can't link one Javascript file from another. Also when you link an external Javascript file there should not be any tags.
Include all the required Javascript files in your html and make sure they're in the order they need to be loaded (jQuery first, in this instance)...
HTML
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="yourfile.js"></script>
</head>
</html>
Javascript (yourfile.js)
$(window).on('scroll', function(){
if ($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
});
As I said, note that there are no script tags in the Javascript file itself.
Your errors seem to be ESLint errors: https://eslint.org/docs/rules/no-undef
Try to add for example at the top of your JS file:
/* global window */
Did you try this,
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
})
});
Edit: I seem to have put your names in wrong order of when in time you replied. Oh well :)
Hi guys sorry for the delay. I tried all of the replies. And thank you all for them!
Archers solution worked!
Banujan Balendrakumar: I did, unfortunately same errors.
Armel: When adding /* global window */ 2 out of 9 error messages are fixed.
The Error msg that got fixed is: ERROR: 'window' is not defined. [no-undef]
[These are all the error msgs i got before making any changes:https://i.postimg.cc/xdNN5ZMq/whativetried.png]
Archer: I tried it. And i now have two scripts that were in my HTML file in two seperate .js files. So that works. Thanks :)
However im experiencing a problem.
*I have two scripts loading in my HTML file/site.
*Whenever I only have one script (out of the two) running (in other words i remove one) the one that is left alone works perfect.
BUT when I run them both it's like the first script is blocking the other from doing it's thing untill it's done. I noticed it works but not all it's features. I will have to look more into that.
That is another problem for another thread I suppose.
Cheers.
I need some help linking my JS file to my html file after I linked jQuery from Google CDN. I could do and put the code inside, but it makes my code look untidy.
This is what I'm doing:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</script>
<script src="images/script.js"></script>
<script src="script.js"></script>
After that, my code does not work. However, when I put it into script tags, it does. I'm linking to script.js correctly, but the code doesn't activate when I try clicking on something. What can I do to fix this?
The code I created was:
$('div').on('click', function () {
$(this).toggleClass('show-description');
});
Thanks!
Try putting your code within document ready function from jQuery. The issue is your DOM is not ready at the time you defined the onclick handler.
jquery document ready function
$( document ).ready(function() {
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
});
Check your file pathway for your script.js file in regards to your html file.
In my file, a have many dom elements and an external javascript file that has some functions to manage events. The problem is that when i include the functions.js file at the end of my main file:
<script src="functions.js"></script>
That works for some elements but not for others. So i move that at the top of my file, and now it works for some elements but not the other either.
It doesn't works means that i got such error in the web console:
ReferenceError: oneOfMyFunctions is not defined
What is the best place to put that include? Thanx in advance.
EDIT:
In my html file (the main file), i did this:
<script>
window.onload = function(){
// start calling your function eg. functions.j();
myFunction();
};
</script>
Still get the same issue.
You can put your JavaScript file anywhere in page. But you should use window.onload method to start execution of your code.
<script>
window.onload = function(){
// start calling your function eg. functions.j();
};
</script>
If you invoke the function before its loaded, it doesn't know what to do. There are two solutions to this:
Use the window.onload option (or jquery $(document).ready(function(){ ... });
make the function call after you load the scripts.
I'm trying out jQuery for the first time, and I'm not sure how to make it work properly. I've included the following code near my opening <head> tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
Followed by the following jQuery code:
<script>
$('.darkmask > img').hover(function(){
$(this).parent().toggleClass('darkmask-hover');
})
</script>
Unfortunately, this code doesn't work when I try it in a browser, or in JSFiddle. However, when I set JSFiddle's framework to load jQuery itself, rather than loading jQuery through my own code, the animation works properly.
Am I loading jQuery wrong? If so, what's the right way?
PRoblem is, your code in JSFiddle is executed on the loading on the page. In your code instead, the execution happens when the HTML elements are not yet loaded because it's in the HEAD, so the selectors like .darkmask actually refer to... nothing.
The solution is to use:
$(document).ready(
function()
{
... your code here
}
To ensure that it is executed when the page is loaded and ready, all the HTML elements are there and therefore JQuery selectors can operate on something.
Are there any HTML elements when the code is executed?
Try:
$(function () { // this function executes when the page loads
alert(x);
// put your code here
});
Wrap your entire code in the following:
$(document).ready(function() {
//ALL CODE GOES HERE
});
Wrap your code in:
$(function() {
.... Your code here ...
});
It will mean your code is executed after the DOM tree is loaded.
You do need to wrap your jQuery code within the ready function, like this:
$(document).ready(function(){
// put your code here.
});
Also make sure your script tags have type="text/javascript" as an attribute otherwise it won't get run as javascript.
I am new to jQuery and am stuck at some strange issue. I am using jQuery's change and click methods. They are working fine when used in my HTML file in the <script> tag.
Like:
<script>
$("select,input").change(function ()
{
// My code and some alerts
});
</script>
When I copied the same in external JavaScript code without <script> and imported that in my HTML it was not at all working.
Are there any changes which are needed to use jQuery in external JavaScript code?
PS: Some other non-jQuery functions present in same external JavaScript code are successfully called from HTML.
First off, you don't want a <script> tag in an external JavaScript file, if that's how I'm reading your post.
The trick with jQuery is that your code is set to execute immediately.
You want to wrap your script so that it loads when the document is ready, in something like:
$(document).ready(function(){
$("select,input").change(function ()
{
// My code and some alerts
})
});
And you want to make sure that your file is loaded after jQuery (otherwise the $ global will not be set).
Additions:
Here is what your HTML should look like:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jscript/myExternalJs.js"></script>
Here is what your JavaScript code should look like (note there is no script tag inside the JavaScript file):
$(document).ready(function(){
$("select,input").change(function ()
{
// My code and some alerts
})
// Other event handlers.
});
As far as your other script... it sort of depends on what you're doing. The most important thing is to not try to hook event listeners up to objects that don't yet exist, which is why we use document.ready.
Did you make sure jquery is defined before your own jquery code?
You should also make sure the DOM is ready when dealing with jquery:
$(document).ready(function() {
$("select,input").change(function() {
// my code and some alerts
});
// more code here if needed, etc.
});