script.js file not linked to html? - javascript

I'm trying to replicate this jsfiddle project on my local machine
I have copied the exactly displayed contents of the index.html, script.js, and style.css files on my local machine. Although my local files didn't initially work the desired way (displaying song length, title, etc).
So I added these lines to the top of the html file, so that my script.js file would be linked. I also added a line to my html file so that my downloaded jquery file would be recognized. With these lines added to my html file:
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="script.js"></script>
But when loading my index.html file into my browser, I can choose a file just fine, but none of the javascript content is displayed. I don't think my script.js file is being recognized, because even If I add console.log() lines to the script.js file, they aren't displayed.
How do I ensure my script.js file is correctly linked so that this jsfiddle project works on my local machine the same way it works on jsfiddle?
thank you

You can use cdn
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Or if you download the file you have to be sure where is this file in your project
<script src="project/jquery.min.js"></script>

You can try this.
You need to make sure you have jquery downloaded locally or use a CDN in your html file. See below.
Also, make sure you have your script.js in the same folder of your index.html or point to the file correctly.
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js">
</script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script type="text/javascript" src="script.js" defer></script>

Related

Difference between linking a javascript file and directly adding script into html

I am recreating a javascript game which requires tables, but when I link my javascript file to my index.html the grid does not show on my browser, but when I directly add my javascript inside the script tag in my html, the grid shows on the browser.
Any help would be appreciated thank you!
This is my code by referencing a js file inside html(the tables do not show)
html with js link
This is my code without referencing a js file(tables do show)
html without js link
This is my main.js
main js
This is the browser without linking js file
browser without js file
This is my browser with linking js file
browser with js reference
First I linked the js file with script src=js path but it did not work but it worked when I put the javascript directly inside the html script tag. I was wondering how I can make it work with referencing a separate js file for a cleaner html code.
It's due to that your local paths are not resolving correctly. Without seeing directory structure I can't know what could be wrong.
First of all, please re-check and verify that both files main.js and index.html are in the same directory.
Alternatively, you could create folder called js inside of your main directory (where index.html is) and then move the main.js into that folder and try:
<script type="text/javascript" src="/js/main.js"></script>
index.html and main.js files must be at the same directory in order to include .js file as you did
<script type="text/javascript" src="main.js"></script>
UPDATE (I will leave answer whole, if somebody also gets stuck, so they can troubleshoot the problem):
The reason why it couldn't resolve path is because there was blank spaces between src and = ; when giving src, that part needs to be connected.
Just like this
<script type="text/javascript" src="main.js"></script>
Take a look here:
What happens:

I need my java.js file to reference other .js files

Initially my HTML file contained all javascript but I've tried to push it into it's own seperate java.js file and then reference it from the HTML. The current java.js requires the code from "jquery-csv.js" and "jquery-1.8.2.js" but since I've moved the javascript into it's own file, it no longer works. I assume this is because the java.js no longer has access to the other .js files.
<script src="jquery-1.8.2.js"></script>
<script src="jquery-csv.js"></script>
<Script src="Java.js"></script>
How would I be able to make it so the java.js file can reference and call the other .js files to ensure the code works?

samsung smart TV how to include js library to other js files

I've written my own js library, how can i make other existing js files use it. For example, i created a video project, which include a default homepage scene (including homepgage.css, homepage.html and homepage.js) and a default detail scene (including detail.css, detail.html and detail.js). Then i created my own js file "lib.js" which fetches all video files from my server. Now the question is: how to make the file homepage.js able to use methods of "lib.js". I tried to include lib.js path in the file index.html by using:
<script type='text/javascript' language='javascript' src='scenes/detail.js'></script>
<script type='text/javascript' language='javascript' src='scenes/homepage.js'></script>
<script type='text/javascript' language='javascript' src='scenes/lib.js'></script>
I also include script tag:
<script type='text/javascript' language='javascript' src='scenes/lib.js'></script>
in the file homepage.html.
but both of them do not work.
Anybody know how to solve this ?
SmartTV application acts like normal website. If you want to use methods from lib.js you should include script before those methods are used. In your case problem may be in accessing methods from lib.js before they are declared. You should check emulator console to find such errors.

jQuery not running with my browser

I am new in jQuery, so I need some help. I downloaded jQuery latest version from jquery.com.
I saved this as a text file as jquery.js. Then I keep my html code & jquery.js in the same folder.
When I run my code my jQuery code function doesn't work, but when I used jQuery from Google in my code it works very good
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
So please help me to get out my problem.
My code is given below:
<!DOCTYPE html>
<html>
<head>
<script src="javascript/jquerymin.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
I guess you have a 404 error when loading javascript/jquerymin.js.
I save this as a text file as jquery.js. Then I keep my html code & jquery.js in same folder
This means that you have to change this:
<script src="javascript/jquerymin.js"></script>
into this:
<script src="jquery.js"></script>
Your application files will look like this:
site-root
├── index.html
└── jquery.js
if you are working on windows, make sure file extension isn't hidden (which is default behavior for windows platform). if the extension is hidden then Windows Operating system automatically adds extension to the file name you have given. for example, if you saved a file as "jquerymin.js" then the file has actually been saved as "jquerymin.js.txt".
Make sure you have the file jquerymin.js inside the javascript folder.
May be it is a typo,
You have used jquerymin.js for including jquery
Usually the jquery min file come with below name
jquery.min.js
So,
Check your file name whether it is jquerymin.js or jquery.min.js
and as your src="javascript/jquerymin.js" it should be in a javascript folder inside root

How to use jQuery with Django?

I am interested in using the jQuery tablesorter but somehow am unable to.
I have followed the instructions and have placed jquery.js and the tablesorter.js in the same folder as my templates (the folder where the html file is). Unfortunately, when trying to access the .js files, it keeps hitting a 404, which I'm assuming means that the files are not on the correct path.
Any ideas for this fix?
Does django have a special place to place these js files? (not in the templates folder?)
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type ="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
The myTable is the same exact table as the one in the examples
Usually jquery, js, css, images and most of other static contents are handled as static files and not as django templates. Read managing static files docs.
For jQuery, you can use Google API :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And for Django, Did you configure a path for your scripts/médias etc... ? (in settings.py maybe ?)
To add to what others have written, if you want to make JQuery available throughout your site/app and you don't like external dependencies such as Google you can do the following:
Download the latest "compressed, production" JQuery at https://jquery.com/download/ - for example, on the command line in your static directory (might be <projectname>/static): wget https://code.jquery.com/jquery-2.1.3.min.js
Add a reference to load JQuery in your site's "base" template file (might be <projectname>/<appname>/templates/base.html) - for example: Add <script src="{% static 'jquery-2.1.3.min.js' %}"></script> in the <head> section
Test the JQuery installation by adding something like the following to one of your templates:
<script type="text/javascript">
$(document).ready(
function(){
$("#jqtest").html("JQuery installed successfully!");
}
);
</script>
<p id="jqtest"></p>
If necessary/usual after making template updates, restart your Django server, then load a page which uses the template with the test code

Categories