I have this script in the separate Sample.js file:
function MyPrint(text)
{
document.write(text);
}
And I have the following HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silly example</title>
</head>
<body>
<div>
<script type="text/javascript" src="JavaScript/Sample.js">
MyPrint("Hello silly world!");
</script>
</div>
</body>
</html>
Final result is that the text "Hello silly world!" is NOT printed on the page. What should I do to make this work? I would prefer not to move the script tag to the head, if possible. Thanks.
I think the src tag overrides whatever's inside.
Try the following:
<script type="text/javascript" src="JavaScript/Sample.js"></script>
<script type="text/javascript">
MyPrint("Hello silly world!");
</script>
Your script can be considered loaded after the closing </script> element. This should work:
<!-- just a sidenote: type="text/javascript" is the default for script as of html5 -->
<script src="JavaScript/Sample.js"></script>
<script>MyPrint("Hello silly world!");</script>
<script type="text/javascript">
MyPrint("Hello silly world!");
</script>
window.onload = function(){
MyPrint("Hello silly world!");
};
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 am unable to get this piece of code working. I am running this on xampp. The alert works fine but the html wont load. Please help.
I have added the links to jquery 3.2.1
index.html
$(document).ready(function(){
$("#buttonClick").click(function(){
alert("Hello");
$("#viable").load('new_123.html');
});
});
</script>
New_123.html
<html>
<body>
<h1>Hello 123</h1>
</body
</html>
Your body tag is missing a closing bracket ">".
I have used the same code and i mgetting the result properly May be that '>' is an issue!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#buttonClick").click(function(){
var d= $("#viable").load('b.html');
});
});
</script>
</head>
<body>
<div id="viable"></div>
<button id="buttonClick"></button>
</body>
</html>
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 have an image.html file in dreamweaver.
in source code I link an js file called img.js
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>PHOTO</title>
<script language="javascript" type="text/javascript" src="js/img.js"></script>
</body>
</html>
if an use an alert in img.js
alert("My First Jquery Test");
it shows correctly in web page but if write some javascript code like
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
The paragraph above was changed by a script.
nothing shows..why and how I show this?
The script is working as you can see here.
Report your fully HTML file if still have problem.
Remember:
<html>
<head></head>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Do it right
edit img.js
window.onload=function(){
alert("My First Jquery Test");
document.getElementById("p2").style.color="blue";
}
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: