Why is a DOM element null? [duplicate] - javascript

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.
I have this simple HTML file:
<!DOCTYPE html>
<html>
<head>
<script src='test.js'></script>
</head>
<body>
<p>I am a paragraph tag</p>
<h1 >I am an h1 tag</h1>
<div id="id"> I am a div tag</div>
</body>
And this simple script (test.js):
y=document.getElementById("id");
y.style.color="green";
Why on earth is "y" null? The error I'm getting is
TypeError: y is null
I'm sure this is a simple syntax thing that I'm missing, but I can't for the life of me figure it out! Help!
Post Script: Both the html file and the test.js file are in the same folder.

you have to place the script at the end of the document when all the elements are created:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I am a paragraph tag</p>
<h1 >I am an h1 tag</h1>
<div id="id"> I am a div tag</div>
</body>
<script src='test.js'></script>

You can wrap the content on your script using $(document).ready if you are using jQuery or window.onload if using plain javascript.

Related

Problems with getElementById [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'm trying to write simple web app in VSCode. I have little misunderstanding. May be its really simple thing, but i don't know why it doesn't work normally like in examples which i saw.
i have js file (script.js)
function getHistory(){
return document.getElementById("history-value").innerText;
}
alert( getHistory());
and my index.html where i'm using div's tags
<div class="result">
<div class="history">
<p id="history-value">55555</p>
</div>
<div class="output">
<p id="output-value" class="output-value">7777777</p>
</div>
</div>
in beginning of course referense to js
<head>
<title>Calculator</title>
<meta charset="utf-8" >
<link rel="stylesheet" href="style.css">
<script src="script.js">
</script>
</head>
But allert are not working. I can't see nothing. If i use
console.log (document.getElementById("history-value").innerText );
it shows null in console window.
Please explain me what's wrong with it?
1) As Java script is loaded before html page so you have to add script tage at bottom of the page in your case as you are taking value of history-value element which you have added after script tag so when script tag is loaded there is no element with id history-value so you will get null. So you have to add this script after this element
index.html
<head>
<title>Calculator</title>
<meta charset="utf-8" >
<link rel="stylesheet" href="style.css">
</head>
<div class="result">
<div class="history">
<p id="history-value">55555</p>
</div>
<div class="output">
<p id="output-value" class="output-value">7777777</p>
</div>
</div>
<script src="script.js"></script>
script.js
function getHistory(){
return document.getElementById("history-value").innerText;
}
alert( getHistory());
The problem is that your <script> tag appears in the <head> section of your document, and when the script loads, the rest of your HTML has not yet been loaded by the browser, so the <p id="history-value"> tag effectively does not yet exist as far as the browser is concerned.
In this case, you should put your <script> tag just before the </body> tag, or at the very least after the <p id="history-value"> tag, so that <p> tag appears before the Javascript attempts to read it.
It looks like the script runs when there is no history-value element.
Are you sure you are running the code after document has been loaded?
Your code work in the following snippet (but I guess is due to the fact that javscript is loaded at the end of the document).
But to make sure you can place into a
document.addEventListener( 'DOMContentLoaded', function( event ) {
// your code here
})
function getHistory(){
return document.getElementById("history-value").innerText;
}
document.addEventListener( 'DOMContentLoaded', function( event ) {
alert(getHistory());
});
<div class="result">
<div class="history">
<p id="history-value">55555</p>
</div>
<div class="output">
<p id="output-value" class="output-value">7777777</p>
</div>
</div>

JS - Onload event not firing [duplicate]

This question already has answers here:
How to add onload event to a div element
(26 answers)
Closed 6 years ago.
This fires the onload event:
<!DOCTYPE html>
<html>
<body onload="alert('Hello')">
<p> Demo </p>
</body>
</html>
This does not fire the onload event:
<!DOCTYPE html>
<html>
<body>
<p id="demo" onload="alert('Hello')"> Demo </p>
</body>
</html>
In the second example, why is the event not firing?
The elements that support onload are
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
A way to access any other element on load could be by adding a script tag, like below, though it depends very much on what you want to achieve
<!DOCTYPE html>
<html>
<body>
<p id="demo"> Demo </p>
<script>console.log( document.getElementById('demo').textContent );</script>
</body>
</html>
the onload property/event is only for the body, if you want to make some modifications to the <p> you should do it in a function defined in the body onload property

why my js cannot be linked to html? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
<!doctype html>
<html>
<head>
<script type="text/javascript">
var instock=true;
var shipping=false;
var elstock= document.getElmentById('stock');
elstock.className=instock;
var elship= document.getElmentById('note');
elship.className=shipping;
//the text should be updated by values stored
//in these variables.
</script>
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<div class="message">Available:
<span id="stock"></span>
</div>
<div class="message">Shipping:
<span id="shipping"></span>
</div>
</div>
</body>
</html>
why js cannot be linked to html??? and how i can link css images to js as well?
For example, if it is true, show circle image. If it is false, show cross image.
According to the Chrome console:
Uncaught TypeError: document.getElmentById is not a function
You are missing the 'e', try document.getElementById.
Also, once that´s fixed, you will see:
Cannot set property 'className' of null
That's because you need to run the code once the page is loaded (as stated in the comments).
Then you will have another problem because you are trying to access the element with id note and there's no one, I guess you are trying to get shipping there.
Try this code:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function onloaded () {
var instock=true;
var shipping=false;
var elstock= document.getElementById('stock');
elstock.className=instock;
var elship= document.getElementById('shipping');
elship.className=shipping;
//the text should be updated by values stored
//in these variables.
}
</script>
</head>
<body onload="onloaded()">
<h1>Elderflower</h1>
<div id="content">
<div class="message">Available:
<span id="stock"></span>
</div>
<div class="message">Shipping:
<span id="shipping"></span>
</div>
</div>
</body>
</html>

Very simple javascript example for getElementById. Why am I getting an error? [duplicate]

This question already has answers here:
getElementById and null - why? [duplicate]
(2 answers)
Closed 8 years ago.
<!DOCTYPE html>
<html>
<body>
<script>
var aMessage = document.getElementById("aaa").innerHTML;
console.log(aMessage);
</script>
<p id="aaa">Hello World!</p>
</body>
</html>
When I access the document, the console error I am getting is:
Uncaught TypeError: Cannot read property 'innerHTML' of null
What am I missing?
It's because you have the script tag before the element. Try it the other way around:
<!DOCTYPE html>
<html>
<body>
<p id="aaa">Hello World!</p>
<script>
var aMessage = document.getElementById("aaa").innerHTML;
console.log(aMessage);
</script>
</body>
</html>
It's usually advised to put the script tag at the very bottom of your page. There's also a couple of events such as load and DOMContentLoaded that you can use to start your script once things have loaded

DOM Get Element Outside the HTML Tag [duplicate]

This question already has an answer here:
Can I access to iframe 's parent's element from the iframe page
(1 answer)
Closed 9 years ago.
Hi I have some big problem please kindly help me..
I have a html structure like this:
<html>
<body>
<div id="getInHere">Get me</div>
<iframe>
<html>
<head>
$('#clickme').click(function(){
// i don't what should be put here to get to #getInHere div
});
</head>
<body>
Click me
</body>
</html>
</iframe>
</body>
</html>
I must append something on the #getInHere and I don't know how. Please help.
Thanks.
jQuery:
$('#clickme').click(function() {
$('#getInHere').append('text');
});
jsFiddle Live Example: http://jsfiddle.net/P89sa/

Categories

Resources