JS变量值未显示在html中

Question

I want to display the js variable inside an html tag. Here is my code:

<script>
    document.getElementById('test1').innerHTML = parseInt(localStorage.getItem("newvalue"));            
</script>

HTML Code:

<details>
    <summary>Section 1</summary>
    <p><b>Value: <p id="test1"></p></b></p> 
</details>

The value of id=test1 is not displaying in my web page. Please advice. Thanks.

Answer 1

Make sure

<script>
document.getElementById('test1').innerHTML = parseInt(localStorage.getItem("newvalue"));            
</script>

is on the button of your page, just before the </body> tag. Your script is probably loaded before your DOMs. Also/else, try to use a <span> instead of <p> .

Answer 2

It Works

Either make sure the DOM call is at the bottom of your page, or call it on jQuery.ready

$( document ).ready(function() {
    document.getElementById('test1').innerHTML = parseInt(localStorage.getItem("newvalue"));            
});

Answer 3

As 9Deuce said above in the comments, you can't nest p tags in p tags. Try changing it to:

<span id="test1"></span>