Cannot get the hidden tag value

StackOverflow https://stackoverflow.com/questions/21992224

  •  15-10-2022
  •  | 
  •  

Pregunta

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!

¿Fue útil?

Solución 2

There are three problems:

  1. there is no innerHtml, innerHTML is the correct syntax.
  2. the hidden "p" does not have a value, it is not an input field. use innerHTML for accessing it.
  3. 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>

Otros consejos

hidden is an input element type, not a p attribute:

<input type="hidden" id="2" value="This input should be hidden." />

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.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top