I'm trying this effect in my .html file, but don't know how to call javascript ?
I've tried with but that doesn't do anything.
Here is the Fiddle.
This is the HTML code:
<!doctype html>
<html>
<head>
<title> Tikitas </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta charset = "UTF-8" />
</head>
<body>
<div class='header'>Header</div>
<div class='content'></div>
<script type="text/javascript" src="script.js">
</body>
</html>
Close your script tag.
This:
<script type="text/javascript" src="script.js">
Should be this:
<script type="text/javascript" src="script.js"></script>
In the header part of your HTML structure, you'll need to put:
<script src=""
in the "" you will put the path to your JavaScript file.
If your JavaScript file is in the same folder as your HTML file, you'll just need to put the name of the file + the extension in the src="" part.
And after close it with the usual close tag </script>.
At the end it's suppose to give you something like that <script src="path"></script>.
Related
Doing some basic practice/testing for a project I'm working on and can't get my html file to access the functions written in the attached javascript file. I feel like there's something super basic that I'm missing but I can't put my finger on it.
I pulled the basic button from here: Creating an ON/OFF button with javascript
And I tried the solutions here: HTML file not pulling information from javascript file
My html:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>
My js:
function turn(){
currentvalue = document.getElementById('turn').value;
if(currentvalue == "X"){
document.getElementById("turn").value="O";
}
else{
document.getElementById("turn").value="X";
}
}
The function itself works when embedded in a script tag within <body> but not when pulled from the attached javascript file. What am I missing?
function turn(){
currentvalue = document.getElementById('turn').value;
if(currentvalue == "X"){
document.getElementById("turn").value="O";
}
else{
document.getElementById("turn").value="X";
}
}
<!DOCTYPE html>
<head>
<script type="text/javascript" src="app.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>
You need to add defer atrribute.
You should use <script> tag in body.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<input type="button" value="X" id="turn" onclick="turn();" />
<script src="app.js"></script>
</body>
</html>
For summary: Modern approach to old approach
You can use module which are defered by default <script type="module" src="/app.js"></script>
You can use defer to make sure your js is executed after page has load i.e <script src=app.js" defer></script>
You can put your <script> tag before </body> body tag closing
For more details, you can look at this excellent answer.
I have such a problem. My script doesn't load external file properly.
An error is: func() is not defined. And the code:
external.js:
#charset "UTF-8";
function func(){
alert("0ddd");
}
and the script:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="external.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="center">
<h1 align="center">My site</h2>
<script>func()</script>
</div>
</body>
</html>
My files are placed in the same folder. Regards
JavaScript file shouldn't contain such character. Remove it and will work fine:
#charset "UTF-8"; // remove it
Also, you may place the script inside the body rather:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="center">
<h1 align="center">My site</h2>
</div>
<script type="text/javascript" src="external.js"></script>
<script>func()</script>
</body>
</html>
If you want to explicitly set the charset, then add it in the script tag itself:
<script type="text/javascript" src="external.js" charset="UTF-8"></script>
But it is better to provide charset in the meta tag: (Place the following inside the <head>
<meta charset="UTF-8">
I have a PHP based website. I need to add a JavaScript code in to the head. I would like to include the code in to a small JavaScript file and call it from within PHP page. The code starts with <script type="text/javascript"> and ends with </script>. So I tried to save the code in to code.js and in the head of my website's PHP code I put <script type="text/javascript" src="code.js" /> but it didn't work. I am wondering what am I doing wrong?
The content of the PHP page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following JavaScript code instead of the <!--head-->:
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the PHP code I inserted <script type="text/javascript" src="code.js" />
The problem is that you have inserted the tag script as a non-templated tag, here is the right form:
<script type="text/javascript" src="code.js"></script>
Obviously, if the .js is located in the right place, it will be loaded.
You haven't seen the tag in your code probably because you've inspected the HTML with an HTML inspector, but that tool is not always capable to show you malformed tags. For be sure to see the right HTML result, you must view the souce code (usually, right click on the web page via browser and "show source code" option is there).
The content of the php page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following javascript code instead of the <!--head--> :
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the php code I inserted <script type="text/javascript" src="code.js" />
I would need help on attaching my .js document to my html document so that jQuery works on it, at the moment only normal JS is working.
This is the html document header (called "3i.html"):
<!PROCTYPE <!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
<script type="text/javascript" src="3i.js"></script>
</head>
The javascript file is called "3i.js".
Javascript commands like "alert" or "prompt" work fine, I just can't find a way to make jQuery code work.
Help is very much appreciated
Include the jQuery library and your .js file just before closing the body.
<!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="3i.js"></script>
</body>
</html>
I am attempting to add some simple jQuery through an external file. I would like the code to remain in the external .js file. I'm using Dropbox so I can test my site locally, and I am almost certain JavaScript works through this method, but I don't know about the jQuery library. I can't seem to get any feedback through trial and error. Here is the simple form of the code I'm attempting.
The HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel='stylesheet' type='text/css' href='style.css'/>
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>
<body>
<div id='container'>
<div class='menu'>
<h2>Title of menu/h2>
</div>
<div class='panel'>
<p>
Some text here
</p>
</div>
</div>
</body
This is the entire .js file so far. Does this need to be defined as a function and then added into the HTML? Is it a scope issue?
$(document).ready(function(){
$('.menu').click(function(){
$('.panel').slideToggle('slow')
})
})
You load your file before the library your file is using. Change the two <script> lines so that jQuery is loaded first:
Change
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
You need to add your code after the jQuery inclusion..
So swap these lines
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
That is because your code uses jQuery, so you need to load jQuery before you can use the $.