no display date in p tag

Question

i have one simple page of html with this code:

 <p id="demo" onload="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().

`30px` _must_ be in quotes because it's a string. Leaving them out will cause an error. — Andy, Jul 10 '22 at 09:34
Click [here](https://stackoverflow.com/questions/42004512/js-onload-event-not-firing) read this answer will help you — ahmed mostafa, Jul 10 '22 at 09:49

exphoenee · Answer 1 · 2022-07-10T09:46:36.113

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>

score 0 · Answer 2 · answered Jul 10 '22 at 09:40

0

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 onload="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!

answered Jul 10 '22 at 09:40

Vivek

385
2
8

thank you for reply but my question is that when there is error on `fontsize` property why `new Date` no run? – Hadi Jul 10 '22 at 11:56
Fontsize property and Date value is working fine for me. Issue I found was onload event added in p tag. If you move in body It should work fine. Thanks! – Vivek Jul 10 '22 at 12:58
yes if left `30px` into "" Fontsize property and Date value is working fine but my question is other, that if left `30px` no surround with "" then there is error on fontsize property and new Date no work but p1 with `JAVA SCRIPT` work fine. why once is ok other is no? – Hadi Jul 10 '22 at 14:37
Reason can be the value of this fontsize method. The fontsize() method creates a HTML element that causes a string to be displayed in the specified font size. But not sure for now. Thanks! – Vivek Jul 11 '22 at 05:39

no display date in p tag

2 Answers2