no display date in p tag-CodePudding

i have one simple page of html with this code:

 <p id="demo" onl oad="prtdate()"></p>
    <p id="p1">JAVA SCRIPT</p>
    <button onclick="bigsize()" type="button">Click me to BigSize</button>
    <script>
        function prtdate() {
            document.getElementById("demo").innerText = new Date();
        }
        function bigsize() {
            document.getElementById("demo").style.fontSize = 30px;
        }
    </script>

30px is not in "" i know it must surround with ""

but my question is when left 30px whiteout "" why prtdate() not run?

even if change :

        document.getElementById("demo").style.fontSize = 30px;

to:

        document.getElementById("test").style.fontSize = 30px;

it is also no show date in prtdate().

CodePudding user response：

You should try with body element. because The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

function bigsize() {
    document.getElementById("demo").style.fontSize = '30px';
}

<body onl oad="prtdate()">
    <p id="demo"></p>
    <p id="p1">JAVA SCRIPT</p>
    <button onclick="bigsize()" type="button">Click me to BigSize</button>
</body>

Hope this help. Thanks!

CodePudding user response：

The 30px is a string! I corrected it, end your code working properly now.

function bigsize() {
    document.getElementById("demo").style.fontSize = "30px"; //Here the 30px is a string!
}

const demo = document.getElementById("demo");
document.body.onload = () => demo.innerText = new Date();

<p id="demo"></p>
<p id="p1">JAVA SCRIPT</p>
<button onclick="bigsize()" type="button">Click me to BigSize</button>

Or you can leave everything is the last is the script taht is loaded...

function bigsize() {
    document.getElementById("demo").style.fontSize = "30px"; //Here the 30px is a string!
}

document.getElementById("demo").innerText = new Date();

<p id="demo"></p>
<p id="p1">JAVA SCRIPT</p>
<button onclick="bigsize()" type="button">Click me to BigSize</button>