<!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!";
})
Related
I'm trying to change the text in an h2 element with the simplest code but don't get what I'm doing wrong :
html
<h2 id="tries">Number of tries : 0</h2>
javascript
document.getElementById("tries").innerHTML = 'new text';
There is nothing wrong wiht that. You asked JS to replace the innerHTML, and JS done that.
If you want to change only the value after the ":" then here is an example where I placed a span into the the p and I change the innerHTML of this span.
function changeText(value) {
//this is the point
document.getElementById("tries-value").innerHTML = value;
}
const input = document.querySelector("input");
input.addEventListener("change", (e) => changeText(e.target.value));
changeText(input.value)
<h2 id="tries">Number of tries : <span id="tries-value">0</span></h2>
<label for="input-number">Change the input:</label>
<input id="input-number" value="10" type="number" />
I just guess you did that and as you can see, it will fail
<!doctype html>
<html>
<head>
<script>
document.getElementById("tries").innerHTML = 'new text';
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
You can first do DOM Operations if the DOM is actually loaded, so you just listen to the window.load event and it will work
<!doctype html>
<html>
<head>
<script>
window.addEventListener('load', function () {
document.getElementById("tries").innerHTML = 'new text';
});
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
I have written a JavaScript alert message code it displays the alert message first in both codes 1 and 2 before Html content. What should I do to run the HTML content first and then a javascript code?
Code 1
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script src="text.js"></script>
</body>
</html>
Code 2
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
alert(" This is alert message.");
</script>
</body>
</html>
There is a load event, which will fire AFTER the page is loaded. You can listen to the event:
window.addEventListener('load', function() {
console.log('All assets are loaded');
alert ("This is an alert MSG");
})
You can use setTimeout() for this
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
setTimeout(()=>{
alert(" This is alert message.")
},2000)
</script>
</body>
</html>
You can use window.onload function. This function called after body load.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
window.onload = function () {
alert(" This is alert message.");
}
</script>
</body>
</html>
In your first code just put defer attribute as below
<script defer src="text.js"></script>
A script that will be downloaded in parallel to parsing the page, and executed after the page has finished parsing
for more detail refer to the URL
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
create your Script like below
<script type = "text/javascript">
function displayalert() {
alert ("This is an alert MSG");
}
</script>
add this code in your body(this is a button)
<input type = "button" value = "Click me" onclick = "displayalert();" />
when you click on this button you will see the alert
We are using the onclick attribute and call the displayalert() function where the alert() is defined.
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.
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>
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>