<button type="button" id="time" onClick="document.getElementById('time').innerHTML = Date()"> Click to display the current date and time. </button>
document.getElementById('time').innerHTML = Date()". Confused? Well, let's do the obvious thing and go through it step by step. Actually, it would be more obvious just to freak out and run away, but you take my point.
- "getElementById" finds the element with the ID specified, in this case "time". Here, the element with the ID "time" is the button itself, meaning when clicked, the button will display the date and time on the button. We could change this by giving something else the ID "time" - a <span> or a <p> would work fine for this. Never give two elements the same ID. There are classes, which allow you to group IDs, but that's not the point of this example.
- "innerHTML" tells JS to edit part of the page through HTML, confusingly enough. This example shows that "innerHTML = Date()", which means JS should change the selected element to your device's current date and time. Spooky.
All that explanation when you could have just looked at a clock... dammit. Suddenly I'm not a fan of doing stuff.