This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
Hello guys I would like some help since I am new to JS
I expect this piece of code to show an alert with the href of the element "aaa" but nothing happens. Could you explain what I am doing wrong?
thanks
<html>
<body>
<script type="text/javascript">
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
</script>
file word
</body>
</html>
Please delete this question as it is a duplicate of
Why does jQuery or a DOM method such as getElementById not find the element?
I am sorry for posting .. I am new to JS and I didn't know what to search for in the first place
The problem is that your script is executed before the a tag is rendered. Put the script tag after the a tag and it should work.
First of all, you should use Developer Console for finding errors (right click page, then Inspect Element).
Anyway, the problem seems to be that your JavaScript is done before you have made the anchor (a) element.
<html>
<body>
file word
<script type="text/javascript">
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
</script>
</body>
This should work.
The script is executed before the DOM is ready so there is no element with id aaa.
You can add the script inside
window.load=function(){
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
}
You can also define the script tag near closing body tag. In this case the DOM is ready and it will able to find an element with id
<body>
file word
<script type="text/javascript">
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
</script>
</body>
Just as Patrick said, move the tag down after and I think this value of href is what you looking for
var xxx = document.getElementById("aaa").getAttribute("href");
Related
This question already has answers here:
What does a script-Tag with src AND content mean?
(4 answers)
Closed 1 year ago.
hello i am trying to get a function in a script folder to work on an html page
I have this set up html
<script src="add.js">
txt = document.createElement('p')
document.body.appendChild(txt)
txt.innerHTML = add(2);
</script>
and script file function
function add(a){
return a+a
}
Its not working and im not sure why.
i have tried wrapping the whole statements inside a function and calling that. tried onload in different positions and didnt work.
thank you
As Mike said in the comments you can't write your script that way
Two ways to solve it
1:
<script src="add.js"></scirpt>
<script>
//...Code here
</script>
2: preferred:
<script>
txt = document.createElement('p');
document.body.appendChild(txt);
txt.innerHTML = add(2);
function add(a){
return a+a;
}
</script>
<script id="me" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script
<script>
var oB = document.getElementsById('me');
me.onload = function(){
alert('OK');
}
</script>
Why me.onload is not triggered after the script is loaded?
There are 2 issues:
a missing > at the end of the first line (you have written </script instead of </script>)
there is no variable me: you have retrieved the script tag into a variable oB.
Thus, you can fix your code by change me.onload = ... to ob.onload = ....
Moreoever, you should avoid using inlined declaration of event listeners such as <script onload="...">.
Last but not least, you should use addEventListener instead of onxxx: addEventListener vs onclick
document.getElementById instead of document.getElementsById
oB instead of me
<script id="me" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script
<script>
var oB=document.getElementById('me');
oB.onload=function(){
alert('OK')
}
</script>
But this won't work either because me is already loaded like the other answer states.
before you execute the alert codes, the script tag with id "me" is already downloaded, so despite the syntax error in your code, you can not get the alert.
you can simply use:
<script id="me" onload="alert('OK');"src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
<script type="text/javascript">
function translateIt() {
Microsoft.Translator.Widget.Translate("en", "es");
}
</script>
<button onclick="translateIt()">Translate</button>
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
Microsoft.Translator.Widget.Translate("en", "es");
}
</script>
<button id="btn">Translate3</button>
This html block contains two buttons that should perform the exact same function. As such, the top button works but the bottom button doesn't. What is the difference between the 'onclick' implementation within html vs. within javascript?
The difference isn't with the click handler, the difference is the order of execution. In the first example you define something (the function) then reference it (in the HTML). In the second example you reference something (the HTML element) and then define it.
So in the second example the call to getElementById("btn") doesn't find anything, because at the time it executes that element doesn't exist yet.
HTML and JavaScript execute in the order in which they exist on the page as the page is being rendered. From the top of the document to the bottom.
If your second script example appears before the button, the getElementById will find no element.
By moving the script tag to after the element, it will work like normal.
<button id="btn">Translate3</button>
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
Microsoft.Translator.Widget.Translate("en", "es");
}
</script>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I am try to edit the html through Javascript with gdocument.getElementById but I always come across the error: Uncaught TypeError --- Cannot set property 'innerHTML' of null
Here is my very simple code
<html>
<head>
<title>External .js File- Page 3</title>
</head>
<body>
<script language="JavaScript">
document.getElementById("text").innerHTML = "Hi!";
</script>
<article id="text"></article>
</body>
</html>
You are trying to get the element before it exists.
Move the script so it appears after the element.
(Or wrap the code in a function, then bind that function to an event handler like load).
Try:
window.onload = function(){
document.getElementById("text").innerHTML = "Hi!";
};
You execute the script before the element exists. document.getElementById is looking for 'text' but it's not there yet. You must put your script inside window onload event like so:
window.onLoad = function () {
document.getElementById('text').innerHTML = "Hi";
};
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.
first one:
function change(){
document.getElementById("clr").style.backgroundColor="red";
document.getElementById("test1").innerHTML="hwllo world";
}
second one:
document.getElementById("test1").innerHTML="hwllo world";
The first one is working fine. But the second one is not working when the file is loaded.
Javascript and HTML rendering are executed in the sequence they are found in the file. So if you're executing a piece of JS before an HTML element is rendered then the JS code wouldn't work.
This will fail:
<script>
document.getElementById("test1").innerHTML="hwllo world";
</script>
<div id="test1"></div>
This will work as expected:
<div id="test1"></div>
<script>
document.getElementById("test1").innerHTML="hwllo world";
</script>
Alternatively you can use the various onload and dom ready events to make sure that your script executes after all the HTML have been rendered:
<script>
window.onload = function(){
document.getElementById("test1").innerHTML="hwllo world";
}
</script>
<div id="test1"></div>
And what error is in console? May be you are trying to set innerHTML of not existing node? If you want to manipulate with divs, you have to do it after the page is loaded, so typically call this as body event onLoad:
<script>
function init() {
document.getElementById("test1").innerHTML="hello world";
}
</script>
<body onload="init();">
<div id="test1"></div>
...
As James Allardice said in his comment, the code is probably executed before the DOM is ready. Your code could then fail as the element might not be there. This is a known problem, but there is also a known solution. The most used solution is probably to use jQuery, which has an easy way to allow a function to only be executed after the document is ready. To use this method, first you need to include jQuery as a script reference and then modify your code as follows:
$(document).ready(function() {
document.getElementById("clr").style.backgroundColor="red";
document.getElementById("test1").innerHTML="hwllo world";
});
Now if you are using jQuery anyways, you can also rewrite your code to use jQuery selectors and make it a bit more compact:
$(document).ready(function() {
$("#clr").css("backgroundColor", "red");
$("#test1").html("hwllo world");
});
Both pieces of code are functionally equivalent.