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.
HTML:
<p id="demo"></p>
the script:
document.getElementById("demo").innerHTML = 5 + 6;
It is supposed to show the result but nothing happens. I added a separate myScript.js file to write the code. In HTML I wrote:
<script type="text/javascript" src="myScript.js"></script>
What has to be the problem ?
You need an element with id demo for this to work
document.getElementById("demo").innerHTML = 5 + 6;
<div id="demo"></div>
The problem in your case is probably the positioning of the included script tag. It is executed, as soon as it is parsed by the browser, but the demo tag is not loaded at this point.
Try
window.onload = function() {
document.getElementById("demo").innerHTML = 5 + 6;
}
This will execute your code only after the document has loaded and the demo element is available.
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>
This question already has answers here:
Javascript variables in HTML attributes
(5 answers)
Closed 4 years ago.
Passing a javascript variable using tag in iframe by attaching variable like this "+var+" but its not passing value to next page . is there any different way or any bug in my code please suggest.
here is my code.
<script>
var user = "user#user.com";
</script>
<iframe src="http://127.0.0.1/ve2/ve2/www/kitchen-sink/api/fm/df.php?user="+user+""></iframe>
Thanks in advance .
You cannot execute javascript directly, it has to be executed from script tags OR via an event.
<iframe id="iframe"></iframe>
<script>
var iframe = document.getElementById('iframe');
var user = "user#user.com";
iframe.setAttribute('src', "http://127.0.0.1/ve2/ve2/www/kitchen-sink/api/fm/df.php?user=" + user );
</script>
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");
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:
onclick="" vs event handler
(9 answers)
Closed 9 years ago.
I have been using onclick to execute my javascript code for a long time, but I was told by many folks not to use this inline javascript, and I don't know the disadvantage of it
If you mean the difference between these, the second is far clearer and cleaner, because it separates the behaviour from the content.
Method 1:
index.html:
<div onclick="alert('div clicked!');this.innerHTML='Clicked!';">Not clicked...</div>
Method 2:
index.html:
<div id="123">Not clicked...</div>
<script src="js/scripts.js"></script>
js/scripts.js:
var elem = document.getElementById("123");
elem.onclick = function(e) {
alert('div clicked!');
this.innerHTML = 'Clicked!';
};