So I've created a website using HTML,CSS and Javascript and saved it on the desktop. I then created a local server using xampp. I placed this html file in the htdocs folder of xampp. The file is named "foodlist.html". Whenever I try opening this fine in the webbrowser as localhost/foodlist.html, the jQuery and Javascript contents of the file fail to display. Here is a part of the code:

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href=".3.4/css/bootstrap.min.css">
<script src=".3.4/js/bootstrap.min.js"></script>
<script src=".11.3/jquery.min.js"></script>
<script id="javascript" src="file:///C|/Users/Akshat/Desktop/Project/JS-jQuery/addnremove.js"></script>

How can I make the javascript and jquery code work each time I open the file on the browser with the /localhost?

So I've created a website using HTML,CSS and Javascript and saved it on the desktop. I then created a local server using xampp. I placed this html file in the htdocs folder of xampp. The file is named "foodlist.html". Whenever I try opening this fine in the webbrowser as localhost/foodlist.html, the jQuery and Javascript contents of the file fail to display. Here is a part of the code:

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script id="javascript" src="file:///C|/Users/Akshat/Desktop/Project/JS-jQuery/addnremove.js"></script>

How can I make the javascript and jquery code work each time I open the file on the browser with the /localhost?

• javascript
• php
• jquery
• html

• You need to convert the path of addnremove.js to a URL. The directory path that you have will most likely not work. Something like http://localhost/path/to/addnremove.js – Maximus2012 Commented Jun 29, 2015 at 21:27
• Additionally, if the html and the JS file are in the same directory, then you should be able to specify the file name in src attribute of script tag. It is probably a good idea to create a proper directory structure for your project with directories for css/js and images etc. This along with proper configuration file will make your code/project more portable when you move it to a different server or to a different location on same server. – Maximus2012 Commented Jun 29, 2015 at 21:28

2 Answers 2

The file:///C|/Users/Akshat/Desktop/Project/JS-jQuery/addnremove.js is not a valid address, such kind of linking even with a right address will not work for security reason..

For it to work, e.g. your XAMPP directory is "C:\xampp", you can copy the "C:\Users\Akshat\Desktop\Project\JS-jQuery" folder into "C:\xampp\htdocs" folder and link your "addnremove.js" file this way:

<script id="javascript" src="http://127.0.0.1/JS-jQuery/addnremove.js"></script>

You can even change the http://127.0.0.1/ address with http://localhost/.

it looks like "file:///C|/Users/Akshat/Desktop/Project/JS-jQuery/addnremove.js" is not a proper link to a file. try putting this file relative to your html like you did with main.css