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/
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.
I have typed in the javascript just as you have but on a separate file linked through the HTML file. The button shows up however I am not getting any alert when it is clicked. My code is as follows:
Javascript(index.js):
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
</html>
Anyone know why my button is not working? It seems to me all my code is in order unless I am overlooking something.
Your code is being executed prior to the element it refers to existing in the page. Move the JavaScript to the end of the document or wrap it in a window.onload function.
window.onload = function () {
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
}
jsFiddle example
You need to wait for the document to be constructed before you can reference elements in it.
Put your script tag in body, just before the end. This will ensure that the document is there when the script runs.
Or, you can wrap your js in a load listener like this
window.addEventListener("load", function(){
//...your stuff here
})
You should not put <script type="text/javascript" src="index.js"></script>
before <body></body>, because when the browser is trying to register the event, the <button> is not loaded already. So when you take a look at the control panel, you would get something like TypeError: document.getElementById(...) is null.
The right version might be
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
Sometimes you should put script code below the button
<button id="myButton">Click</button>
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
first thing is you haven't included jquery in your code, change your HTML to this
!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
and your index.js to
$(document).ready(function(){
$('#myButton').click(function(){
alert("Hi");
});
});
this worked for me hope this work for you too
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: