Put getElementById() at the bottom [duplicate] - javascript

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>

Related

Why is onclick not working in JavaScript? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I wrote a simple code to learn Eventhandling in JavaScript but when I click on the button "Click" the function hello() does not work, why?
html file:
<!DOCTYPE html>
<html>
<head>
<script src="hello.js"></script>
</head>
<body>
<button id="click">Click</button>
</body>
</html>
JavaScript file:
document.getElementById("click").onclick = hello;
function hello() {
alert("You Clicked!");
}
You are calling the script before the dom is generated. experiment to call the right before the tag.

how to open a document when loading a web page [duplicate]

This question already has answers here:
Javascript Excel OpenFile
(2 answers)
Closed 5 years ago.
I want to open a excel document while loading a web page but i don't know how. I tried this:
<script>
function myFunction() {
window.open("file:///D://Files/doc.xlsx");
}
</script>
<body onload="myFunction()">
</body>
But it didn't work. I want to mention that it has to be done for IE8 and less.
Add tag <script> to <head>
<head>
<script>
function myFunction() {
window.open("file:///D://Files/doc.xlsx");
}
</script>
</head>
<body onload="myFunction()">
</body>

calling javascript function inside html [duplicate]

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>

How to make Event Listeners work with external Javascript File? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
I'm trying to get the element with getElementById(), but it returns null even though the element exists. What am I doing wrong?
<html>
<head>
<title>blah</title>
<script type="text/javascript">
alert(document.getElementById("abc"));
</script>
</head>
<body>
<div id="abc">
</div>
</body>
You have to put this in a document load event. The DOM hasn't gotten to abc by the time the script is executed.
Your script runs before the DOM has been loaded. To fix this you can place your code in the window.onload function like so:
window.onload = function() {
alert(document.getElementById("abc"));
};
An alternative is to place your script right before the closing </body> tag.
If you don't want to attach to the load event then simply put your script at the bottom of the body, so it will execute at the end-
<html>
<head>
<title>blah</title>
</head>
<body>
<div id="abc">
</div>
<script type="text/javascript">
alert(document.getElementById("abc"));
</script>
</body>
</html>
This is because the script runs before the page has rendered.
For proof add this attribute to the body tag:
<body onload="alert(document.getElementById('abc'));" >
But it doesn't exist, not at that point in the HTML. HTML documents are parsed top-to-bottom, just like programs run. The best solution is just to put your script tag at the bottom of the page. You could also attach your JavaScript to the onload event.

Why can't javascript find a div that is defined below it? [duplicate]

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>

Categories

Resources