This question already has answers here:
How to call a JavaScript function within an HTML body
(4 answers)
Closed 7 years ago.
<html>
<head>
</head>
<body>
<script>
var myFunction = function(){
return "hello world";
}
</script>
myFunction();
</body>
</html>
I just finished the code academy course on javascript but it didn't taught me how to code javascript inside html. I need to display hello world inside the html's tag using the function is this possible? my friend told me I need jquery just to do this.
You have to specifically tell the webpage to execute your function when it's loaded.
Instead of returning the string I believe you'd like to write it in the body of the webpage.
This is a simple way to do so :
<html>
<head>
<script>
var myFunction = function(){
document.body.innerHTML = "hello world";
}
</script>
</head>
<body onload='myFunction();'>
</body>
</html>
<html>
<head>
</head>
<body>
<Script>
function myFunction(){
document.write("hello");
}
</script>
<Script>
myFunction();
</Script>
</body>
</html>
This was asked already
How to call a javascript function within an HTML body
I just replace the tag with document.write
Try this
<html>
<head>
</head>
<body onload='myFunction()'>
<script type="text/javascript">
var myFunction = function(){
return "hello world";
}
</script>
</body>
</html>
Related
This question already has answers here:
$(document).ready equivalent without jQuery
(39 answers)
Closed 8 years ago.
I have the following code
<html>
<head>
<script>
document.getElementById("txt").innerHTML = "Hello";
</script>
</head>
<body>
<div id="txt"></div>
</body>
</html>
and of course the text "Hello" isn't displayed because it's before the div. However because i use egl i can put js code only on head.
Is there any way to fix this?
You need to wait for your page to be ready before your code can execute on markup in the page. For example, use window.onload handler as in the example below. There are nicer ways to do this such as jQuery methods, but this will serve as an example of what you need.
<html>
<head>
<script>
window.onload = function ()
{
document.getElementById("txt").innerHTML = "Hello";
}
</script>
</head>
<body>
<div id="txt"></div>
</body>
</html>
Why does it not print "Hello" in my browser?
I have this code in a file called index.html
<!DOCTYPE html>
<html>
<head>
<title>Learning Ajax</title>
</head>
<body>
<h1>Learning Ajax</h1>
Load Ajax Text File
<script src="js/main.js"></script>
</body>
</html>
and also this code in a file called main.js
var message = "Hello";
$(function() {
var message = "Goodbye";
})();
alert(message);
its a self invoking anonymous function
Because of error: you use $, but there is no such function you have defined.
There's no AJAX in the code above. I recommend visiting jQuery's learning website and finding out what AJAX is all about and how it works: http://learn.jquery.com/ajax/.
For some reason, I have to assign the javascript code by a javascript function, like the code at below.
<html>
<head>
<script>
window.onload = init();
function init(){
document.getElementsByName('content')[0] = alert('LOL');
}
</script>
<script type="text/javascript" name="content">
</script>
</head>
<body>
</body>
</html>
After page load, the expected result should like following
<html>
<head>
<script type="text/javascript">
alert('LOL');
</script>
</head>
<body>
</body>
</html>
However, the alertbox doesn't display. Is there anyone can help me?
To get you started:
Don't misspell script
Don't misspell elements
There is no name attribute for script elements
onload = foo() will call foo immediately and assign its return value to onload. Get rid of the ()
Browsers (AFAIK) won't respect modifications to existing script elements, only new ones. So use createElement and appendChild
Write this instead:
window.onload = function init(){
document.getElementsByName('content')[0] = 'LOL';
alert('LOL');
}
Just changing the text of the javascript tag won't make it execute, because it is in the client side. I would do it more like this:
window.onload = init();
function init(){
document.getElementsByName('content')[0] = function SomeMethod(){ alert('LOL'); };
SomeMethod();
}
Can I have access from javascript on one page to elements on other page the script has created before? Something like this:
var win=window.open("http://www.ftwars.com/battle",'myWindow');
win.document.getElementById('center').onClick();
Simply yes - you can , via variable reference, you cannot reach reference if you not created it in your javascript
You are correct. From the context you have given above, win is like any other object.
First page (x.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var w = window.open('y.html', 'w');
w.document.getElementById('target').onclick = function () { alert('!'); };
</script>
</body>
</html>
Second page (y.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="target">target</button>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
This works:
<html>
<body>
<div id="bla"></div>
<script type="text/javascript">
var mybla = document.getElementById('bla')
</script>
</body>
</html>
This doesn't:
<html>
<body>
<script type="text/javascript">
var mybla = document.getElementById('bla')
</script>
<div id="bla"></div>
</body>
</html>
mybla is null at this point. argh. How can I make this work? Thanks!!!
(and yes, I want the div below the script)
Because the DOM isn't fully loaded yet. You need to put your code in an onload handler if you want it above the HTML. Like this:
<script type="text/javascript">
window.onload = function() {
var mybla = document.getElementById('bla');
}
</script>