I can’t get my external JavaScript to run.
My index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<script> console.log("foo") </script>
<!-- NOT WORKING-->
<script src="scripts/notworking.js" type="javascript"></script>
<script> console.log("bar") </script>
</body>
</html>
my notworking.js contains only the following two lines:
console.log("working?")
alert("working!");
But nothing happens. Only the "foo" and "bar" from the index.html file are displayed.
<!-- NOT WORKING-->
<script src="scripts/notworking.js" type="javascript"></script>
type="javascript" is no valid MIME type.
Use type="text/javascript" or simply remove it.
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.
Here is the code. I'm over Arch Linux, if this is a important thing...I'm tired of trying different libraries, in local, from jquery's site but it does't work...
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Put your jQuery call and your custom script in separate tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
Note that with HTML5 you don't need to specify type for JavaScript.
Wrong way of using script tag !
Make sure you properly wrapped your jQuery code inside a <script></script> block. Also close all open script blocks.
This should work
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Working sample
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>.
I'm currently a noob in javascript and i've been experimenting some stuff.
What i'm doing right now is i'm trying to display numbers from 1 to 10 using an external js
that i created. But when i run in it always displays the "undefined" text at the bottom
here is the external js:
function increment(count){
while(count<10){
document.write(count +"<br>")
count++;
}
}
here is my script in html:
<!DOCTYPE html>
<html>
<title> javascript </title>
<head>
<script language="javascript" src="ok2.js"> </script>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write(increment(3));
</script>
</body>
</html>
is there any way to eliminate that "undefined" display at the bottom?
just change in your HTML like below....
<!DOCTYPE html>
<html>
<title> javascript </title>
<head>
<script language="javascript" src="ok2.js"> </script>
</head>
<body>
<script language="javascript" type="text/javascript">
increment(3);
</script>
</body>
</html>
You do not need to write document.write();
The system at JSFiddler seems to think this is Ok too, but won't display the alert either. http://jsfiddle.net/dmafackler/zEEpB/3/
<!doctype html>
<html>
<head>
<title>foobar</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
$(document).ready(function() { alert("Is anybody home?"); });
</script>
</head>
<body>
<p>Copasetic.</p>
</body>
</html>
<script> tags aren't self-closing. You need to provide a closing tag:
<script type="text/javascript" src="jquery.js"></script>
If you don't, the HTML isn't parsed correctly: