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?
Related
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>
Here is my code snippet:
function myFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
<!DOCTYPE html>
<html>
<body>
<textarea id="myTextarea"></textarea>
<button type="button" onclick="myFunction()">Transform into link</button>
<script src="links.js"></script>
</body>
</html>
Somehow, the created link is not opened when I click on it. Kind of stuck at this point.
You were doing it right, you just needed to use href instead of innerHTML.
function myFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").href = x;
}
<!DOCTYPE html>
<html>
<body>
<textarea id="myTextarea"></textarea>
<button type="button" onclick="myFunction()">Transform into link</button>
My Link!
<script src="links.js"></script>
</body>
</html>
Im relatively new to HTML and Javascript , Im currently in functions right now.
I tried this code but it didn't print anything. if I use a button and keep the document.get... inside a function it works why?
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Javasc";
</script>
<p>
hey
</p>
<p id="demo"></p>
</body>
</html>
Try calling your function on window.onload maybe. Something like this:
<!DOCTYPE html>
<html>
<body>
<script>
window.onload = function(){
document.getElementById("demo").innerHTML = "Javasc";
};
</script>
<p>
hey
</p>
<p id="demo"></p>
</body>
</html>
You have to let the page rendered and then call the method.
Or put the script tag at the end
<!DOCTYPE html>
<html>
<body>
<p>
hey
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Javasc";
</script>
</body>
</html>
<!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>