Here is my code:
<html>
<head>
<script type="text/javascript">
var x= document.getElementById("2").value;
document.getElementById("1").innerHtml = x;
</script>
</head>
<body>
<p hidden="hidden" id="2">This paragraph should be hidden.</p>
<p>This is a visible paragraph.</p>
<p><b>Note:</b> The hidden attribute is not supported in IE.</p>
<p id="1"></p>
</body>
</html>
in this code i have a hidden tag as you can see. I want that the javascript code read text value of the p tag with an id 2 and then print the same value to other <p> tag wiht id="1". But this is not working. Earlier i even tried to use nodeValue but also this is not working and when i checked out in google developer tool then it was showing an error as following:
Cannot read property 'value/nodeValue' of null
please note:
after a quick experiment i noted that after adding a event handler <body onload="y();>" there was no error but there was no expected result!
please help!
hidden is an input element type, not a p attribute:
<input type="hidden" id="2" value="This input should be hidden." />
There are three problems:
there is no innerHtml, innerHTML is the correct syntax.
the hidden "p" does not have a value, it is not an input field. use innerHTML for accessing it.
your javascript code runs before the browser knows about paragraps, so they don't exist when you want them to be accessed. put javascript after the paragraphs or run the code after the page is loaded.
this should work:
<html>
<head>
</head>
<body>
<p hidden="hidden" id="2">This paragraph should be hidden.</p>
<p>This is a visible paragraph.</p>
<p><b>Note:</b> The hidden attribute is not supported in IE.</p>
<p id="1"></p>
<script type="text/javascript">
var x= document.getElementById("2").innerHTML;
document.getElementById("1").innerHTML = x;
</script>
</body>
</html>
Don't use numbers for ID.
Try something like <p id="hello"></p>
I think you need to change your tag to then you can set a CSS class with .hidden { display:none; }.
Wrap your Javascript in a function and call it when you need to or go back to your
Also as Maaz said, try not to use numbers in your ID's.
var hiddenValue = document.getElementById('2').innerHTML;
document.getElementById('1').innerHTML = hiddenValue;
The problem with this (and if you try and style it also) is that classes and ID's should not start with (or include) numbers.
Rename your ID's to one and two and then update your javascript accordingly.
e.g
<p id="one">Some stuff</p>
Also hidden cannot be used with a p element as it's for inputs only.
You're better off using display:none; in CSS.
If you NEED to access it via css as a number, you can use
[id='1']{
/*code*/
}
but your javascript still wont work.
As James has pointed out, using numbers for ID's is perfectly valid in HTML5.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 1 year ago.
I would like to change text in P or other tag in HTML with Java Script
I tried to many different ways.
However, any of those didn't work well.
Console says.
Uncaught TypeError: Cannot set property 'textContent' of null
<script>
//1 document.getElementById("stackoverflow").textContent="newtext";
//2 document.getElementById("stackoverflow").value ="newtext";
//3 document.getElementById("stackoverflow").innerHTML ="newtext";
<script>
<div class="row">
<p id="stackoverflow">I wanna change this text</p>
</div>
Two changes
move your script after element is loaded
remove id from markup
below code works
document.getElementById("stackoverflow").textContent="newtext";
<p id="stackoverflow">I wanna change this text</p>
Check your id there is no space in between.
id is stackoverflow and your giving document.getElementById("stack overflow")
That is completly normal as long as you have two id attributes on the p tag only the first one will be consider.
let p = document.getElementById("stackoverflow");
console.log(p);
<p id id="stackoverflow">This is a sample paragraph</p>
But when you remove the first id it should work as expected
let p = document.getElementById("stackoverflow")
console.log(p);
<p id="stackoverflow">This is a sample paragraph</p>
let p = document.querySelector("p");
console.log(p.id);
<p id id="stackoverflow">This is a sample paragraph</p>
As you can see the idattribute is empty
there are 2 ways ,
1 - if you are doing onload event , u can wrap this within your body tag and call your function
2 - if its onlclick event , call this function onclick eventremove comment on button and onload = "ChangeEvent()"
<!DOCTYPE html>
<html>
<script>
function ChangeEvent() {
document.getElementById("stackoverflow").textContent = "HI";
}
</script>
<body onload="ChangeEvent()">
<p id="stackoverflow">Change</p>
<!-- <button onclick="ChangeEvent()">Clicked</button> -->
</body>
</html>
Place always your <script> tag right before the closing </body> tag
Close properly the </script> tag
<head>
<!-- HEAD stuff goes here. link, meta, title etc -->
</head>
<body>
<div class="row">
<p id="stackoverflow">I wanna change this text</p>
</div>
<!--
SCRIPTs go here before the closing </body>
-->
<script>
document.getElementById("stackoverflow").textContent="newtext";
</script>
</body>
Additional read on parser blocking versus asynchronous javascript
I'm newbie to Javascript, I tried the below code, it works fine for <div> element but not for <P> and <h1> elements
<script type="text/javascript">
function PrintText(){
document.getElementById('heading').innerText = 'Hello World';
}
</script>
<body>
<div id="heading"></div> // Works
<h1 id="heading"></h1> // Not Working
<P id="heading"></P> // Not Working
<button type="button" onclick="PrintText()">Submit</button>
</body>
When I use document.getElementById('heading').innerHTML= 'Hello World'; for <P> and <h1> elements the above script works(Using innerHTML instead of innerText)
Why the innerText property is not working for <p> and <h1> elements?
First suggestion is don't ever put same IDs on multiple elements in same page.
Why?
Because when you do document.getElementById() browser lookup stops when it finds first element of that ID.
Second suggestion is:
Change
innerText
To.
textContent
innerText won't work cross browser. Better to use standard way to put text with textContent.
Problematic here is your are using IDs. An ID is something unique. An ID can't be reused. If you want to assign multiple elements at once give them the same class and call them by class in your Javascript code. This should solve your problem as Javascript does not expect multiple elements to have the same ID and so it is only editing the first element.
I'm trying to change the text of a button using this code, but I'm not getting any reaction. This should be good, looking at everything I've read through - but it doesn't change the text. What am I doing wrong here?
<!DOCTYPE html>
<html>
<head>
<script>
function changeText() {
document.getElementById('myButton').value = "New value";
}
</script>
</head>
<body>
<button id="myButton" onclick="changeText()">Change my text!</button>
</body>
</html>
You need to set the 'innerHTML' property instead:
function changeText() {
document.getElementById('myButton').innerHTML= "New value";
}
You can specify a value on the button but it's not used very often. In your case you want to the text of the button to change. So innnerHTML is your friend. See this page for more details.
Also note that you could use 'innerText' in IE as well but it is not supported in Firefox (and probably not in some other as well).
'textContent' can also be an option but that one is not supported in older browsers (before 2011). So innerHTML is the safest option.
Buttons can have a value but what is displayed is the HTML inside of the button, which is what you want to change. Better use innerHTML:
function changeText() {
document.getElementById('myButton').innerHTML = "New value";
}
What the other answers said, plus this: buttons generated by the <input> element have a value! That may be where the confusion is coming from:
<input type="button" value="Button Text" id="button42"></input>
What you have is a:
<button>Button Text</button>
element, which is something else; hence innerHTML, not value.
I have a situation with sample code as follows:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>
<h1>The header</h1>
<div>
matter ia always matter matter ia <strong>bold matter</strong> matter matter <em>italics matter</em>matter ia <em><strong>bold italics matter</strong></em>lways matter
</div>
</p>
</body>
</html>
I am just trying to retrieve the specific tags like body->p->div->em->strong when I click on "bold italics matter" using jQuery. Is there any standard method to retrieve as per the click event?
If you wan to get the tag name of the element which is clicked, then you can use:
$('*').click(function(e) {
e.stopPropagation();
console.log($(this).prop('tagName'));
});
Fiddle Demo
I'm not completely sure about what you are trying to accomplish. If you are trying to retrieve the tag itself that the text is contained in, i would recommend that you put a <span> tag in around the the text in question and do an onclick="function()" or simply put the onclick right on the <strong> tag.
As far the the JQuery/Javascript goes, if you want to retrieve the content, it looks like
var foo = document.getElementById.innerHTMl("id");
However, this requires you to have an id in your tags which is probably the best, if not
'standard' method of retrieving the content that is within the tag.
After reading your comments, i am editing this post:
The best way to get the parent elements is to use the JQUery .parent() function. I'd imagine that you would just recursively state something like this:
var foo = $("nameofelement").parent();
I hope this is more of what your looking for.
Thanks for contributing everybody. At last I made it myself with the following code.
$(document.body).click(function(e){
var Tags=[], Target=e.target, stat_msg="";
Tags.push(Target.tagName);
while($(Target).parent().get(0).tagName!=="BODY")
{
Tags.push($(Target).parent().get(0).tagName);
Target=$(Target).parent();
}
Tags.push("BODY");
for(i=Tags.length;i>0;i--)
stat_msg=stat_msg+Tags[i-1]+" ";
alert(stat_msg);
});
here's an easy one (that I'm struggling with)! I have a textarea, a button, and an empty div. All I want to do is insert the updated contents of the textarea into the div onClick of the button. Here's what I've got so far:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function get_text() {
$("#preview").replaceWith( $("#editor").val() );
}
</script>
</head>
<body>
<form>
<textarea name="editor" id="editor">GrumbleCakes</textarea>
<input type="button" value="Preview" onclick="get_text();" />
</form>
<div id="preview"></div>
</body>
</html>
It works the first time you click the button... with the value that was in the textarea on page load ("GrumbleCakes"), but that's it. It won't work with any updated text.
You can set the innerHTML or text content of the preview div by using the html or text functions:
$("#preview").html($("#editor").val());
.replaceWith actually replaces the DOM element. So the div is removed and replaced with the text. Subsequent calls to the function will no longer find the div, since it's been removed.
I think you want to use
.html($("#editor").val()).
Both
$('#preview").html($("#editor").val())
and
$("#preview").text( $("#editor").val())
should work.
However, .html will allow anyone to inject html or javascript into your site leaving it wide open for cross-site scripting attacks...
jikes!!
man you are replacing div with the contents of the textarea. use this function instead:
function get_text(){
var t=$("editor").val();
$("#preview").text(t);
}