My javascript is not working in XAMPP

Question

I want to make my menu to be responsive but my javascript is not working on XAMPP. This is my code:

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<html>
<title>The Forerunner</title>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://127.0.0.1/js/jquery-3.1.1.js"> </script>
<script type="text/javascript" src="http://127.0.0.1/js/menu.js"></script>
</head>



<body>

<div id="banner">

    <img src="img/TheForerunner.png">

</div>

    <span class="menu-trigger">MENU</span>

    <ul class="nav">

        <li><a href="news.php">NEWS</a></li>
        <li><a href="editorial.php">EDITORIAL</a></li>
        <li><a href="features.php">FEATURES</a></li>
        <li><a href="devcomm.php">DEVCOMM</a></li>
        <li><a href="literary.php">LITERARY</a></li>
        <li><a href="sports.php">SPORTS</a></li>
        <li><a href="entertainment.php">ENTERTAINMENT</a></li>
        <li><a href="about.php">ABOUT</a></li>

    </ul>


</body>

</html>

and I don't get any error on my browser's console. I'm using google chrome

$("span.menu-trigger").click(function() {
  $("ul.nav").toggle();
});

When I run it I can't click the menu. I don't get any error on my console.

Did you check your browser's network tab to confirm if the files were loaded? — Lenin Raj Rajasekaran, Feb 27 '17 at 11:23
I am not sure if this is the right way => `src="http://127.0.0.1/js/jquery-3.1.1.js"`. You dont need the `http://127.0.0.1` part , you should provide the path relative to the app root. — mane, Feb 27 '17 at 11:24
Any errors in the console? Do those elements exist? Have you put the jQuery code inside a document.ready handler? `$(function() { /* your code here */ });` — Rory McCrossan, Feb 27 '17 at 11:24
Post the total code. The HTML with `span.menu-trigger` and `ul.nav` is missed in your question. — user2342558, Feb 27 '17 at 11:24
any error in your browser console? Also html code is required too — Serving Quarantine period, Feb 27 '17 at 11:25
Also elements don't exist when your code is run. See [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — charlietfl, Feb 27 '17 at 11:29

score 2 · Accepted Answer · answered Feb 27 '17 at 11:37

I find assigning hostnames to development sites eases all this pain!

Simply add this to your hosts file in C:\Windows\System32\drivers\etc (remember you may need to edit the file as administrator to to that):

127.0.0.1 sitename

Then go to the directory XAMPP is installed, browse to apache\conf\extra and add the following (using your own paths) to your httpd-vhosts.conf file:

<VirtualHost *:80>
 ServerName sitename
 DocumentRoot D:\HTML\yoursite
 <Directory D:\HTML\yoursite>
 IndexOptions +FancyIndexing NameWidth=*
 Options Includes FollowSymLinks Indexes
 AllowOverride All
 Order allow,deny
 Allow from all
 Require all granted
 </Directory>
</VirtualHost>

Then you can simply browse to "http://sitename" and reference all includes from simply "/" which will then work locally and remotely without trouble.

Remember to restart Apache from the xampp control panel after you have made the edits. Also be aware you can have as many of these aliases as you like. I even install Firefox's "server switcher" extension, so I can snap backwards and forwards from local to remote on bunches of sites.

Hi Kim. Above where you see "sitename" replace that (total of once in each snippet) with anything you like. I tend to use initials of the live domain, so mysupersite.com would be mss - But it's entirely up to you. It is NOT the name of your html file (which is likely index.html I suppose), it's a domain name (so to speak) Where you see D:\HTML\yoursite you put the path to your local files. I think most "beginners" have their sites inside the XAMPP directory, but there is no need to do that, you can have it anyway in your own structure. I have all my sites under "HTML" on my D drive. — mayersdesign, Feb 28 '17 at 14:45

Christophvh · Answer 2 · 2017-02-27T11:35:23.803

0

Provide a relative path to your files. Because the url is most likely "localhost".

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="/js/jquery-3.1.1.js">    </script>
<script type="text/javascript" src="/js/menu.js"></script>
</head>

If this still doesn't work make sure your javascript files are in the correct folder. With the above code i assume your javascript files are at the root of your project inside a directory called js

edited Feb 27 '17 at 11:35

answered Feb 27 '17 at 11:25

Christophvh

10,162
6
41
62

still doesn't work. my javascript is indie the js folder and the js folder is inside the htdocs. – Kim Russel Flores Feb 27 '17 at 11:38
@Kim Russel Flores can you show us a printscreen of your folder structure? – Christophvh Feb 27 '17 at 12:11
I can't post an image but here the link folder for javascript. C:\xampp\htdocs\js – Kim Russel Flores Feb 27 '17 at 12:30
and where is the above file located ? is its path: C:\xampp\htdocs\index.php ? – Christophvh Feb 27 '17 at 12:36
and are you trying to load header.php inside a index.php file ?, because if that's the case it will be the issue because you are trying to load a full html structure inside another html structure probably. – Christophvh Feb 27 '17 at 12:49
i know that. but when you load the browser it will look for a index.php file , do you have a include('header.php') inside that file? because if that is the case it will load 2 html sturctures and that will most likely be your issue – Christophvh Feb 27 '17 at 12:53

score -1 · Answer 3 · answered Feb 27 '17 at 11:26

-1

You dont need to add in the localhost address

src="http://127.0.0.1/js/jquery-3.1.1.js"

Instead link to your file like you have done with your css

src="../js/menu.js"

answered Feb 27 '17 at 11:26

Ryan Holmes

467
4
13

My javascript is not working in XAMPP

3 Answers3