Can't add html javascript to seperate .js file (how do I do it)?
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!
javascript html
add a comment |
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!
javascript html
1
Can you post your attempt at getting it to work, rather than what does work?
– Archer
Jan 2 at 7:26
I've fixed the Space and TAB mix error. I should say when I tried the script in HTML it worked as it should. I'm suspecting the problem might be that I can't link the src file "code.jquery.com/jquery-3.3.1.js" in the seperate .js file I'm trying to make. Edit: Just read Archers reply. I will show my attempt in a moment.
– eddie Simsson
Jan 2 at 7:27
your code is missing some libraries
– the_ultimate_developer
Jan 2 at 7:28
Archer: I've now made a new reply to my question. In the rply i attached a link to an image showing my attempt. priyanshi srivastava: i suspect that I am. I think im missing the src file "code.jquery.com/jquery-3.3.1.js". However I do not know how to link it to my .js file as I can do in HTML: <script src="code.jquery.com/jquery-3.3.1.js"></script>
– eddie Simsson
Jan 2 at 7:34
add a comment |
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!
javascript html
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!
javascript html
javascript html
asked Jan 2 at 7:24
eddie Simssoneddie Simsson
12
12
1
Can you post your attempt at getting it to work, rather than what does work?
– Archer
Jan 2 at 7:26
I've fixed the Space and TAB mix error. I should say when I tried the script in HTML it worked as it should. I'm suspecting the problem might be that I can't link the src file "code.jquery.com/jquery-3.3.1.js" in the seperate .js file I'm trying to make. Edit: Just read Archers reply. I will show my attempt in a moment.
– eddie Simsson
Jan 2 at 7:27
your code is missing some libraries
– the_ultimate_developer
Jan 2 at 7:28
Archer: I've now made a new reply to my question. In the rply i attached a link to an image showing my attempt. priyanshi srivastava: i suspect that I am. I think im missing the src file "code.jquery.com/jquery-3.3.1.js". However I do not know how to link it to my .js file as I can do in HTML: <script src="code.jquery.com/jquery-3.3.1.js"></script>
– eddie Simsson
Jan 2 at 7:34
add a comment |
1
Can you post your attempt at getting it to work, rather than what does work?
– Archer
Jan 2 at 7:26
I've fixed the Space and TAB mix error. I should say when I tried the script in HTML it worked as it should. I'm suspecting the problem might be that I can't link the src file "code.jquery.com/jquery-3.3.1.js" in the seperate .js file I'm trying to make. Edit: Just read Archers reply. I will show my attempt in a moment.
– eddie Simsson
Jan 2 at 7:27
your code is missing some libraries
– the_ultimate_developer
Jan 2 at 7:28
Archer: I've now made a new reply to my question. In the rply i attached a link to an image showing my attempt. priyanshi srivastava: i suspect that I am. I think im missing the src file "code.jquery.com/jquery-3.3.1.js". However I do not know how to link it to my .js file as I can do in HTML: <script src="code.jquery.com/jquery-3.3.1.js"></script>
– eddie Simsson
Jan 2 at 7:34
1
1
Can you post your attempt at getting it to work, rather than what does work?
– Archer
Jan 2 at 7:26
Can you post your attempt at getting it to work, rather than what does work?
– Archer
Jan 2 at 7:26
I've fixed the Space and TAB mix error. I should say when I tried the script in HTML it worked as it should. I'm suspecting the problem might be that I can't link the src file "code.jquery.com/jquery-3.3.1.js" in the seperate .js file I'm trying to make. Edit: Just read Archers reply. I will show my attempt in a moment.
– eddie Simsson
Jan 2 at 7:27
I've fixed the Space and TAB mix error. I should say when I tried the script in HTML it worked as it should. I'm suspecting the problem might be that I can't link the src file "code.jquery.com/jquery-3.3.1.js" in the seperate .js file I'm trying to make. Edit: Just read Archers reply. I will show my attempt in a moment.
– eddie Simsson
Jan 2 at 7:27
your code is missing some libraries
– the_ultimate_developer
Jan 2 at 7:28
your code is missing some libraries
– the_ultimate_developer
Jan 2 at 7:28
Archer: I've now made a new reply to my question. In the rply i attached a link to an image showing my attempt. priyanshi srivastava: i suspect that I am. I think im missing the src file "code.jquery.com/jquery-3.3.1.js". However I do not know how to link it to my .js file as I can do in HTML: <script src="code.jquery.com/jquery-3.3.1.js"></script>
– eddie Simsson
Jan 2 at 7:34
Archer: I've now made a new reply to my question. In the rply i attached a link to an image showing my attempt. priyanshi srivastava: i suspect that I am. I think im missing the src file "code.jquery.com/jquery-3.3.1.js". However I do not know how to link it to my .js file as I can do in HTML: <script src="code.jquery.com/jquery-3.3.1.js"></script>
– eddie Simsson
Jan 2 at 7:34
add a comment |
4 Answers
4
active
oldest
votes
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.
add a comment |
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 */
add a comment |
Did you try this,
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
})
});
add a comment |
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.
This isn't a forum - you shouldn't post comments as answers (both this and the one you posted earlier should be deleted.) Put comments under answers if you want to respond to them.
– Archer
Jan 2 at 8:49
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002657%2fcant-add-html-javascript-to-seperate-js-file-how-do-i-do-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
add a comment |
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.
add a comment |
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.
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.
answered Jan 2 at 7:32
ArcherArcher
22.7k53959
22.7k53959
add a comment |
add a comment |
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 */
add a comment |
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 */
add a comment |
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 */
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 */
answered Jan 2 at 7:35
ArmelArmel
1,206920
1,206920
add a comment |
add a comment |
Did you try this,
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
})
});
add a comment |
Did you try this,
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
})
});
add a comment |
Did you try this,
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
})
});
Did you try this,
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
})
});
answered Jan 2 at 7:37
Banujan BalendrakumarBanujan Balendrakumar
9921213
9921213
add a comment |
add a comment |
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.
This isn't a forum - you shouldn't post comments as answers (both this and the one you posted earlier should be deleted.) Put comments under answers if you want to respond to them.
– Archer
Jan 2 at 8:49
add a comment |
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.
This isn't a forum - you shouldn't post comments as answers (both this and the one you posted earlier should be deleted.) Put comments under answers if you want to respond to them.
– Archer
Jan 2 at 8:49
add a comment |
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.
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.
edited Jan 2 at 8:03
answered Jan 2 at 7:56
eddie Simssoneddie Simsson
12
12
This isn't a forum - you shouldn't post comments as answers (both this and the one you posted earlier should be deleted.) Put comments under answers if you want to respond to them.
– Archer
Jan 2 at 8:49
add a comment |
This isn't a forum - you shouldn't post comments as answers (both this and the one you posted earlier should be deleted.) Put comments under answers if you want to respond to them.
– Archer
Jan 2 at 8:49
This isn't a forum - you shouldn't post comments as answers (both this and the one you posted earlier should be deleted.) Put comments under answers if you want to respond to them.
– Archer
Jan 2 at 8:49
This isn't a forum - you shouldn't post comments as answers (both this and the one you posted earlier should be deleted.) Put comments under answers if you want to respond to them.
– Archer
Jan 2 at 8:49
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002657%2fcant-add-html-javascript-to-seperate-js-file-how-do-i-do-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Can you post your attempt at getting it to work, rather than what does work?
– Archer
Jan 2 at 7:26
I've fixed the Space and TAB mix error. I should say when I tried the script in HTML it worked as it should. I'm suspecting the problem might be that I can't link the src file "code.jquery.com/jquery-3.3.1.js" in the seperate .js file I'm trying to make. Edit: Just read Archers reply. I will show my attempt in a moment.
– eddie Simsson
Jan 2 at 7:27
your code is missing some libraries
– the_ultimate_developer
Jan 2 at 7:28
Archer: I've now made a new reply to my question. In the rply i attached a link to an image showing my attempt. priyanshi srivastava: i suspect that I am. I think im missing the src file "code.jquery.com/jquery-3.3.1.js". However I do not know how to link it to my .js file as I can do in HTML: <script src="code.jquery.com/jquery-3.3.1.js"></script>
– eddie Simsson
Jan 2 at 7:34