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();
Related
I'm trying to defer a very simple jQuery test, in order to optimize the speed of my website:
This is the jQuery test:
<html>
<head>
<title>Test Defer</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">$(document).ready(function(){$("#jquerytext").html("Hello World by JQuery");});</script>
Hello World by HTML
<div id="jquerytext"></div>
</body>
</html>
It works correctly. However, if I change the call to the jQuery libraries:
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
it won't work.
Am I doing something wrong? Thank you.
As rightly pointed in the nice comments, it should have used 'window.onload' event, because it will fire after all page is loaded including deferred scripts.
<html>
<head>
<title>Test Defer</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
$(document).ready(function(){$("#jquerytext").html("Hello World by JQuery");});
};
</script>
Hello World by HTML
<div id="jquerytext"></div>
</body>
</html>
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.
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 have following code:
<!DOCTYPE html>
<html data-ng-app="">
<head>
<script type="text/javascript" src="myJs.js"></script>
<script type="text/javascript">
function myFunction(){
alert("Hello.. internal JS");
}
</script>
<!--<script type="text/javascript" src="myJs.js"></script>-->
<!--<script type="text/javascript" src="angular.min.js"></script>-->
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
and myJS.js :
function myFunction(){
alert("Hello.. External JS");
}
and output is: Hello.. internal JS.
I would like to know why the last JS gets executed every time? If I shift the lines to alternate position, the one at the end gets executed.
Thanks
You can check the below fiddle to understand it better. If you define the same function twice, the bottom most will be called.
http://jsfiddle.net/5dALP/
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: