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
Related
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>
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.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
For a project I'm working on I'm adding records to a list. But a button in the added content does not execute the javascript it is supposed to execute.
I've made a scribble out of it - as simple as I could make it - to demonstrate.
The button "some content to click" fires of an alert like I expect. The button 'some other content to click' does not.
I suspect this has to do with the html not being there on load... but I'm clueless on how to solve this.
Anyway... if you guys are willing to help... here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>scribble</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
$('.clickme')
.click(function () {
list = $(this).parents('.container').find('.list');
list.prepend('<div class="record"><button class="record_button">some other content to click</button></div>')
alert('added a record');
});
$('.record_button')
.click(function () {
alert('content clicked');
});
});//]]>
</script>
</head>
<body>
<div class='container'>
<button class='clickme'>add record</button>
<div class='list'>
<div class='record'>
<button class='record_button'>some content to click</button>
</div>
</div>
</div>
</body>
</html>
Try
$('.clickme').on('click',function()..
Listeners don't work for added elements unless you call them like so.
jQuery .on()
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.
This question already has answers here:
addEventListener not working in javascript
(3 answers)
Closed 8 years ago.
I'm not sure why this isn't working... I'll post what doesn't work first, then I'll post what does work underneath it:
This didn't work:
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('theButton').addEventListener("click", function() {
document.getElementById('myAnchor').innerHTML="<label for=\"Name\">What is your name?</label><input type=\"text\" id=\"Name\"/>";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank";
});
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" id="theButton" value="Change link">
</body>
</html>
This did work:
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="<label for=\"Name\">What is your name?</label><input type=\"text\" id=\"Name\"/>";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>
I tried this with my little adjustment to the innerHTML at:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml
The main problem is script is load before myAncor object. Therefore you cannot get it with document.getElementById function. You should call this function after load page DOM object.
If you append the script in head, before the html, the html doesn't exists yet when you try to add the event listener. So you need to wrap it in a onload:
window.onload=function(){
//your code
}