Menu
so I feel(and hope) this is pretty simple. I am new to javascript and am trying to get this working. When I link to my external .js file from my html it does not function. However, when entering the script code directly into my HTML it DOES work.
Here is the js file:
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
This is the index.html file:
<!DOCTYPE html>
<html>
<head>
<title>slidepanel test</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
and this is the CSS:
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
478
Most likely, the problem is that you are including your js file in a head tag or somewhere above your main content. By doing this, you are executing your js code before full html content has been attached. As a result, when your js code executes, it does not recognize any html element because there isn't any.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
On the web browser menu click on the "Edit" and select "Preferences". In the "Preferences" window select the "Security" tab. In the "Security" tab section "Web content" mark the "Enable JavaScript" checkbox. Click on the "Reload the current page" button of the web browser to refresh the page.
Right click on your site and choose inspect. It will open a new window of chrome developer tools. In that go to console and type document. It display the entire document structure including your javascript (Internal code or external link).
You are using jQuery, but it doesn't seem like you have included it. Add this to your HEAD element
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
You need to import jQuery.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Actually, i had a problem like this and i tried the code below.
<head>
<meta charset="ISO-8859-1">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With