I'm having trouble setting a variable and can't find any helpful documentation.
This works:
<!DOCTYPE html>
<html>
<body onload="alert(document.getElementById('foo').firstChild.nodeValue)">
<a id="foo" href="old">Foobar</a>
</body>
</html>
But this does not work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var theText = document.getElementById('foo').firstChild.nodeValue ;
</script>
</head>
<body onload="alert(theText)">
<a id="foo" href="old">Foobar</a>
</body>
</html>
The alert says "undefined". What I really want to do is something like this, which also does not work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var theElement = document.getElementById('foo') ;
var theText = theElement.firstChild.nodeValue ;
document.write(theElement.getAttribute('href')) ;
theElement.setAttribute('href', theText) ;
document.write(meta.getAttribute('href')) ;
</script>
</head>
<body>
<a id="foo" href="old">Foobar</a>
</body>
</html>
Why is this not working?
When your script runs, the foo element doesn't exist. If you check the JavaScript console you should see an error, along the lines of this:
Uncaught TypeError: Cannot read property 'firstChild' of null
You get this error because getElementById will return null if the element you're looking for isn't found.
You need to execute the JavaScript code after the markup. Move your script tag to the bottom of the body, or put it in a DOM ready/load event handler. For example:
<body onload="alert(theText)">
<a id="foo" href="old">Foobar</a>
<!-- Now the `foo` element actually exists, our script can find it -->
<script type="text/javascript">
var theText = document.getElementById('foo').firstChild.nodeValue;
</script>
</body>
Related
<!doctype html>
<html>
<head>
<script>
var a=document.getElementById("one").value;
console.log(a);
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>
In the above code snippets I am trying to print the value associated with input which has id ="one".
But I am getting error as
cannot read property 'value' of null.
You need to put your JavaScript at the end of the body. Placing it in head, means, it will execute even before the DOM elements are ready. Placing it at the end of body, means, JS will execute after the body elements are loaded:
<html>
<body>
<input type="text" id="one" name="acc" value="iss" />
<script type='text/javascript'>
var a = document.getElementById('one').value;
console.log(a);
</script>
</body>
</html>
If you use JQuery, then your code should be in $(document).ready(function(){ ... })
you need to place the <script>...</script> part at the end of your document:
<!doctype html>
<html>
<body>
<input type="text" id="one" name="acc" value="iss">
<script>
var a=document.getElementById("one").value;
console.log(a);
</script>
</body>
</html>
Or you use document.onready event:
<!doctype html>
<html>
<head>
<script>
document.addEventListener("load", function() {
var a=document.getElementById("one").value;
console.log(a);
});
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</head>
<body>
<div id="passage">hello</div>
<div id="question"></div>
<div id="answers"></div>
</body>
</html>
Why is document.getElementById("passage").innerHTML = "Paragraph changed!" not working for me? I just end up with a blank screen, not even the original "hello".
Your script is called before the element is loaded, try calling the script after loading element
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="passage">hello</div>
<div id="question"></div>
<div id="answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>
If you check the console, you can see an error
Uncaught TypeError: Cannot set property 'innerHTML' of null
That is the HTML page is parsed and executed top down.
So, it can't identify what is the element you are mentioning.
So, you should either use an EventListener or place the script just before the end of body tag
Method 1 Event Listener
<!DOCTYPE html>
<html>
<head>
</head>
<script>
window.onload=function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
};
</script>
<body>
<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
</body>
</html>
Method 2 : script is just above body tag
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>
You script should be executed once the page is loaded.
Otherwise all elements of the page may not be still attached to the dom when you refer to them.
Rather than moving the script after the element declaration that may be error prone (you should always be aware of the order of script), you could use
event designed to be executed after the dom is totally loaded.
For example onload attribute of body :
<body onload='document.getElementById("passage").innerHTML = "Paragraph changed!";'>
Your script is calling before element is loaded.
Try
$(document).ready(function()
{
document.getElementById("passage").innerHTML = "Paragraph changed!";
});
JS:
(function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
})
I tried to create two buttons, so that when I click on each- I will get a pop up small window, with a content that it will get while onloading.
This is the code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="ctrl">
<span ng-repeat="x in items">
<button ng-click="parentFunc(x.fieldOne,x.fieldTwo)">{{x.fieldOne}}</button>
<br><br>
</span>
</p>
<script>items();</script>
</body>
</html>
script.js:
var title, content;
function items(){
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.items = [
{fieldOne:"field1", fieldTwo:"field1 content"},
{fieldOne:"field2", fieldTwo:"field2 content"}
];
$scope.parentFunc=function(titleTmp,contentTmp){
title=titleTmp;
content=contentTmp;
var OpenWindow = window.open('popUp.html','_blank','width=500, height=400');
return false;
}
});
}
function codeAddress() {
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
popUp.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
The new pop up window open as expected, but the h1 and div in it get undefined. I tried to debug it, and I saw that after the first two lines of parentFunc are executed, the global variables title and content get what I expect and they are not undefined. However, when the third line is executed and the new window get opened- the global variables are undefined.
Why the two global variables are undefined in the pop up window?
And how can I solve this?
Your method won't work : you are trying to reload the script.jsand then, the vars are reinitialized.
Add your vars in the URL :
var OpenWindow = window.open('popUp.html?title='+titleTmp+'&content='+contentTmp,'_blank','width=500, height=400');
Then, in your second page, read those parameters :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function codeAddress(){
var title = GET_TITLE_FROM_PARAMETER;
var content = GET_CONTENT_FROM_PARAMETER;
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
</script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
And of course, remove codeAddress from the first page as it's useless.
FYI, to get the parameters values, please check this answer.
I've read many tutorials and tried them, but they don't work.
Just for example I wrote this simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script>
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
</script>
</body>
</html>
I get Test Message text in my page.
Then I put my JS code to an external file: '/js/js.js'
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
And modify the HTML file to:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/js.js"></script>
</head>
<body>
<p id="testElement"> Html text</p>
</body>
</html>
When I open the HTML file in a browser, I only get Html text. My JS does not work. Please explain what I am doing wrong.
Your problem is that javascript linked in head is executed before the body is loaded, so you can just put the script at the end of the body like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
Check the JavaScript error console.
Your code runs before the document is rendered so the node testElemet doesn't exist.
Either move your script-include down as the last element in the body or wrap your code in a load/ready event.
function on_document_ready(callback) {
if (document.readyState === "complete") {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}
on_document_ready(function () {
var paragraph = document.getElementById("testElemet");
paragraph.innerHTML = "Test Message";
});
This should work fine:
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement">Html text</p>
<script type="text/javascript" src="/js/js.js"></script>
</body>
</html>
Please make sure that <script type="text/javascript" src="/js/js.js"></script> is placed just before </body>.
Try this
var doSomething = function()
{
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js.js"></script>
</head>
<body onload = "doSomething();">
<p id="testElement"> Html text</p>
</body>
</html>
Try saving both the files in the same folder.
Make use of your browsers developer console, to determine whether any errors have occurred.
Regarding 'onload', you can have a look at this link.
I'm working on a basic quiz Javascript game, but when I use
document.getElementById("demo").innerHTML = "text";
I get this error message:
Uncaught TypeError: Cannot set property 'innerHTML' of null
in the Chrome Console. I have no idea why this no longer works, it has worked for me in the past. However, if I open up a new
tag, the function runs and the code works. It's only when I run the function in the same
tag.
My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Study Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function quiz() {
var rnd = Math.floor(Math.random() * 4);
document.getElementById("demo").innerHTML = rnd;
}
quiz(); //this one does not work
</script>
</head>
<body>
<p id="qarea"><p>
<p id="demo"></p>
<script>
quiz(); //this one does work
</script>
</body>
</html>
You forgot to include id in front of your ="demo" it should look like <p id="demo"> instead of
<p="demo"></p>
Second the reason the first call to quiz does not work is that your document has not loaded yet. you want to do this on pure js
<body onload="myFunction()">
Like this should work: http://jsfiddle.net/t8jnhmhg/1/ <p="demo" is wrong
It should be the following.
Where you would have to add the id attribute to the p tag.
<!DOCTYPE html>
<html>
<head>
<title>Study Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function quiz() {
var rnd = Math.floor(Math.random() * 4);
document.getElementById("demo").innerHTML = rnd;
}
quiz(); // Will not work here because there is no such
// element with ID "demo" at this point in the page load.
</script>
</head>
<body>
<p id = "qarea"><p>
<p id = "demo"></p>
<script>
document.addEventListener( "DOMContentLoaded", function(){
quiz(); // Will work here because the DOM is loaded at this point.
});
</script>
</body>
</html>