0

I am using NGINX. I want to display the current time as an easy way of practicing. I set this in a JavaScript variable. So far, I have a little bit of HTML code.

<!DOCTYPE html>
<html>
  <head>
    <title>???</title>
    <style>
      body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
      }
    </style>
    <script type="text/javascript">
      function myFunction() {
        var d = new Date()
        var n = d.getTime()

        document.getElementById('current-time').innerHTML = n
      }
    </script>
  </head>
  <body onload="myFunction">
    <h1>???</h1>
    <p>This is the current time.</p>
    <p>
      <u>
        <i>
          Current Date and Time is
          <span id="current-time"></span>
        </i>
      </u>
    </p>
  </body>
</html>

I don’t understand why this isn’t working, I have looked in Stack Overflow a lot and this is what they say to do. There are no errors printing in the console, and all the page says is “Current Date and Time is”, and nothing happens with the <span id="current-time">.

Sebastian Simon
  • 14,320
  • 6
  • 42
  • 61
BeginnerPythonLearner
  • 45
  • 7
  • 1
    `onload='myFunction'` does nothing. _“I have looked in Stack Overflow a lot and this is what they say to do”_ — where have you seen `onclick='myFunction'` being recommended? Inline event handlers like `onclick` or `onload` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Mar 23 '21 at 00:42
  • Ok, thanks I will look into that. Will that fix my issue?? – BeginnerPythonLearner Mar 23 '21 at 00:43
  • 1
    Even better, either move the ` – Sebastian Simon Mar 23 '21 at 00:46
  • Probably, you should look at `window.addEventListener(‘DOMContentLoaded’, myFunction)`. – David says reinstate Monica Mar 23 '21 at 00:46
  • @SebastianSimon So vues `@click` or Reacts `onClick` then must be obsolete, hard-to-maintain and unintuitive way of registering events? – Lawrence Cherone Mar 23 '21 at 00:55
  • @LawrenceCherone I’m not talking about Vue or React. I’m talking about the Level 0 DOM event model. – Sebastian Simon Mar 23 '21 at 01:00
  • @DavidsaysreinstateMonica Replace both `‘` and `’` by `"`, `'`, or `\``. – Sebastian Simon Mar 23 '21 at 01:01
  • @BeginnerPythonLearner See [`window.onload` vs `

    `](https://stackoverflow.com/q/191157/4642212); there are several approaches to “fix” this, but do stick with best practices. Before this gets lost, I’ll ask again: you say _“I have looked in Stack Overflow a lot and this is what they say to do”_ — Where, on Stack Overflow have you seen `onclick='myFunction'` being recommended?

     – Sebastian Simon Mar 23 '21 at 01:05
  • @SebastianSimon: good catch, the joys of relying too heavily on iPad’s default quotes. – David says reinstate Monica Mar 23 '21 at 01:12

3 Answers3

1

Here: <body onload="myFunction"> you just provided function reference without execution.

You will need to update it to be: <body onload="myFunction()">

with myFunction() parentheses in the end, so your function will be actually executed on onload event.

Also, from your snipped above, it looks like </body></html> closing tags are missing.

Andrew Ymaz
  • 1,015
  • 5
  • 10
1

Make <body onload="myFunction" <body onload="myFunction()"

Tamir Polyakov
  • 23
  • 3
0
let d = new Date();
  
let n = d.toLocaleString();

will format correctly as well as updating the parenthesis in:

<body onload="myFunction()">
mallxowed
  • 21
  • 2