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.
Ok. I need fresh eyes because I'm still on this s***d problem for one hour!
Here is my simple HTML code (testssio.html) that include javascript script:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var ssio = document.getElementById('ssio');
ssio.html = "it finally works!";
</script>
</head>
<body>
<div id="ssio"></div>
</body>
</html>
But it doesn't work! Using the debugger, I get:
Uncaught TypeError: Cannot set property 'html' of null /testssio/:6
Does anyone get it? I know it's not the correct place to look for debugging help, but I'll be crazy if I don't get it! So please, any help?
Tahnks in advance.
The reason for this is that scripts in the head load before the page is rendered. This means your content is not yet rendered and therefore not a part of document.
If you want to see this work, try moving your script below the element renders, like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
var ssio = document.getElementById('ssio');
ssio.innerHTML = "it finally works!";
</script>
</body>
</html>
A more standardized way of doing this is with events. Many people use jQuery but it can be done with plain js. This would mean changing your script like this:
<script type="text/javascript">
function WinLoad() {
var ssio = document.getElementById('ssio');
ssio.innerHTML = "It finally works!";
}
window.onload = WinLoad;
</script>
This way you can still leave it in the <head>.
Also, using .html is from jQuery. It is generally used as .html(content). If you want to use the plain javascript version use .innerHTML = content.
I mention jQuery so much because it is a highly used API. This quote is from their site:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Your code is running too early before the DOM is loaded and thus document.getElementById() doesn't find the element in the document yet.
You can either move your script tag down to right before the </body> tag or you can wait for the DOM to load before running your code with either the window onload event or a DOMReady event.
There are two errors here. First, you need to put the SCRIPT tag after the element. Second, it's not .html, but .innerHTML. So here is the corrected code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
var ssio = document.getElementById('ssio');
ssio.innerHTML = "it finally works!";
</script>
</body>
</html>
you can use something like this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.onload= function(){
var ssio = document.getElementById('ssio');
ssio.html = "it finally works!";
}
</script>
</head>
<body>
<div id="ssio"></div>
Related
In the following html page i try to put script2 before footer. But this doesn't work. What's wrong?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scrollLeft demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
var script2 = document.createElement('script');
script2.text="alert('ΟΚ')";
document.body.insertBefore( script2, document.getElementsByClassName('footer'));
</script>
</head>
<body>
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
<div class="footer"><p>hello</p><p>world</p></div>
</body>
</html>
I also tried
document.head.appendChild(script2);
which works and
document.body.appendChild(script2);
which doesn't work!
the problem is, document.body is not defined yet, it hasn't even started loading when the javascript is interpreted
There are a couple of problems with this.
You first need to make sure that you are running the javascript at the correct time. In your code, you are running the JS before the body tag is read. Instead place the <script> before the closing </body> tag.
Also, the insertBefore() function takes newNode and referenceNode as parameters. document.getElementsByTagName('footer') returns a list of elements. Instead, change it to document.getElementsByTagName('footer')[0] to retrun the 1st element in the list
Ok, I found it. This is the correct. I put it inside document.ready as Jaromanda X suggested and I add ('footer')[0] as Jackson suggested:
$( document ).ready(function() {
var script2 = document.createElement('script');
script2.text="alert('ΟΚ')";
document.body.insertBefore( script2, document.getElementsByClassName('footer')[0]);
});
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.
The question is trivial, but I'm dumb as rock with JS, and I'd like to save myself some of the precious time I need. For some reasons, nothing happens when I call a method from a javascript file in HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src = "game.js"></script>
<button onclick = "init()">Start</button>
</body>
</html>
And game.js:
function init(){
alert("external fn clicked");
}
Needless to say, the alert does not appear as expected. What am I missing?
The reason was entirely trivial - the console is actually useful (ctrl+shift +j on Windows and Chrome). The js did not load properly due to a syntax error.
I am new to HTML and Javascript, and I have a strange doubt
Is it possible to define a function in "body" tag of html and call it form the "script" tag
Till now i am trying this...
<!DOCTYPE html>
<html>
<head>
<script>
myFunction()
</script>
</head>
<body>
function myFunction()
{
alert("Hello World!");
}
</body>
</html>
No not possible. Browser only understands javascript within the <script> tag.
It will not work, try this,
<html>
<body>
<script>// don't miss script tags for javscript code
function myFunction()
{
alert("Hello World!");
}
</script>
<script>
myFunction(); // call if you have defined function earlier
</script>
</body>
</html>
IMHO:
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
myFunction();
</script>
</head>
<body>
</body>
</html>
or you can use body Onload.
No U cant do it.....U should put js function within the script tag.....
you can do like this
<!DOCTYPE html>
<html>
<head>
<script>
myFunction();
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
</body>
</html>
<html>
<head>
</head>
<body>
<script>
function myFunction()
{
alert("Hello World!");
}
myFunction()
</script>
</body>
</html>
I agree with Rohan but just to check I removed the 2nd pair of script tags and called the function in the same script block as it was defined and it worked but this is not normally the way things are done and this is not normally the use of an embedded JavaScript (js)
Doing a little extra research to find the best/optimum place for embedded js appears to be at the bottom of a webpage before the /body (closing body) tag
Here's a link to Yahoo's "speed up your website" guide:
Yahoo! Developer Network: Best Practices for Speeding Up Your Web Site
and here's the text from the page that refers to embedded js:
Put Scripts at the Bottom
tag: javascript
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
Also, if you go to the site and click the JavaScript tag you get a whole list of optimisations and tips - refer to the image!
is it possible to get javascript to output html where the javascript code is?
For example
<html>
<head>
<title>
</title>
</head>
<body>
<div>header</div>
<div>main
<script type="text/javascript" language="javascript">
// print some html here, maybe google
</script>
</div>
<div>footer</div>
</body>
</html>
Where the end results would look like:
<html>
<head>
<title>
</title>
</head>
<body>
<div>header</div>
<div>maingoogle</div>
</script>
</div>
<div>footer</div>
</body>
</html>
I understand that I can give the containing div and id and then get javascript to insert the anchor take like that, but I just wanted to know if it's possible to do this directly, as in write the html exactly where the javascript is?
Use document.write('YOUR_TEXT') for that
<script type="text/javascript" language="javascript">
document.write('google')
</script>
jsFiddle demo
Yes, although there are a lot of nuances to document.write, it'll output its contents immediately after the calling script element.
warning: document.write will obliterate your DOM once the dom is closed for writing. If you need to call a function asynchronously, you'll have to do DOM manipulation, otherwise document.write will rewrite everything with whatever it's supposed to output. This leads to unintentional results, which is why it's often discouraged.