I was running some basic test cases with document.write() which deletes all existing HTML, in the head tag. Desired output is obtained only when I place the script in <body> tag.
Ran the script in body with success. But script is resulting in issues when used in <head> tag.
<html>
<head>
<title>Output</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Text";
document.write(5 + 6);
}
</script>
</head>
<body>
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
</body>
</html>
Expected output is -
Text
11.
But only 11 is visible.
document.write will erase everything which you had earlier. Your are initially setting the innerHTML of element with id demo to Text, but then you are using document.write, which will completely delete your existing html and replace it will 11. You can append the sum of numbers to the Text.
function myFunction() {
const num = 5 + 6;
document.getElementById("demo").innerHTML = "Text " + num;
//document.write(5 + 6);
}
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
If you do not have any html code, use textContent instead of innerHTML.
function myFunction() {
document.getElementById("demo").textContent = `Text ${5+6}`;
}
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
Placing the script in <head> is not an issue.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML
Try appending the content using innerHTML attribute itself.
More Info on write :
https://developer.mozilla.org/en-US/docs/Web/API/Document/write
You can pass the string Text to the write function along with those numbers
document.write(`Text ${5+6}`)
<html>
<head>
<title>Output</title>
<script>
function myFunction() {
document.write(`Text ${5+6}`);
}
</script>
</head>
<body>
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction(demox)">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>
I am trying to pass an id value of "demox" to a js function to display some text with an onclick event, but it doesn't seem to work. what is the problem here?
You can find script modified which solve your issue here.
https://jsbin.com/yitovikete/edit?html,output
Generally, I would suggest you to add <script> tag within the header of your HTML page like this:
https://jsbin.com/yitovikete/1/edit?html,output
This is good when you need to do something while the body is loading, or want to maybe make some ajax requests.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction('demox')">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>
<!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>
Hi i have this simple code
<!DOCTYPE html>
<html>
<body>
<p id="nod">item node name</p>
<button onclick="stats()">get name</button>
</body>
<script>
function stats(){
var x = document.getElementById("nod");
x.innerHTML = document.body.childNodes.item(0).nodeName;
}
</script>
</html>
when i ask for 1st(0) nodeName i get #text and 2nd is p
when the element is after body like with no line brake in code
i get 1st p why this brake in code matters?
I have a paragraph that I'd like to delete the contents of.
document.getElementById(id).innerHTML = "";
doesn't seem to be working. Does anyone have a better solution?
Here's an example
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("p").innerHTML = "";
</script>
</head>
<body>
<p id="p">
words
</p>
</body>
</html>
but the words in the paragraph are not removed. Thanks in advance to anyone that can help.
<!DOCTYPE html>
<html>
<head>
<!-- here the p tag doesn't exist yet -->
<script>
document.getElementById("p").innerHTML = "";
</script>
</head>
<body>
<p id="p">
words
</p>
<!-- however here it does exist -->
</body>
</html>
how to fix it ?
// only use this if you can't move your javascript at the bottom
window.onload = function() {
document.getElementById("p").innerHTML = "";
}
or move your javascript at the end of the page (this is the preferred one as javascript should always be loaded at the end of the page)
<!DOCTYPE html>
<html>
<head>
<!-- here the p tag doesn't exist yet -->
</head>
<body>
<p id="p">
words
</p>
<!-- however here it does exist -->
<script>
document.getElementById("p").innerHTML = "";
</script>
</body>
</html>
Be aware you use something that's not in W3C spec... (removing by innerHTML='')
var elem = document.getElementById(id);
if (!elem) {
console.log("No element for id:"+id);
} else {
elem.innerHTML="";
console.log("Should work");
}
Make it a function and add with the body onload event it should work:
<script>
function empty(){
document.getElementById("p").innerHTML = "";
}
</script>
<body onload='empty()'>
<p id="p">
words
</p>
</body>
I have often use jQuery for this function but, since you are seeking for pure javascript syntax. you will want to use this code:
document.getElementById("p").remove();
function funboi()
{
document.getElementById("p").innerHTML = "";
}
<!-- Just add a button. Works fine-->
<p id="p">
words are amazing
</p>
<button onclick="funboi()">click to delete</button>
i have searched around but cant find exactly what i need. i want the div, which contains a variable value, to update every time the variable changes. is this possible? without reloading the whole page, as this would reset the variable value.
<head>
<script> var eg=30</script>
</head>
<body>
<div> 30 </div>
<button onclick=eg++>increase</button>
</body>
how would i then make the div containing the number update
You have to write your variable to div after update it.
<head>
<script> var eg=30</script>
</head>
<body>
<div id="mydiv"> 30 </div>
<button onclick='eg++; document.getElementById("mydiv").innerHTML = eg;'>increase</button>
</body>
document.getElementsByTagName('div')[0].innerHTML = your_var;
Add this on the onclick event
<head>
<script> var eg=30</script>
</head>
<body>
<div id="display"> 30 </div>
<button onclick="eg++;document.getElementById('display').innerHTML = eg;">Increase</button>
Start by creating a function that both increases the counter, and updates the div. Then, call that function from onclick. If you place your script at the botton, you can easily remove all the inline scripts from your HTML, which would make it more organized and easier to read:
<body>
<div id="egDiv"> 30 </div>
<button id="egButton">increase</button>
<script>
var eg=30
// Function to increase the counter
function increaseEg() {
eg++;
document.getElementById('egDiv').innerHTML = eg;
}
// Add onclick handler, the simplest way:
document.getElementById('egButton').onclick = increaseEg;
</script>
</body>