How to return the system date by clicking a button using a JavaScript function?

Question

I wanted to show the system date after clicking the button, but after clicking the button it shows nothing. I have just started JavaScript and I don't know what I am doing wrong.

function dateFunc() {
   return this.innerHTML = Date();
}

<button onclick="dateFunc()">The time is?</button>

Thanks in advance.

Mamun · Accepted Answer · 2018-05-07T08:09:05.067

4

You have to pass this to the function so that you can refer that inside the function:

function dateFunc(thatBtn) {
   return thatBtn.innerHTML = Date();
}

<button onclick="dateFunc(this)">The time is?</button>

edited May 07 '18 at 08:09

answered May 07 '18 at 07:13

Mamun

58,653
9
33
46

Mihai Alexandru-Ionut · Answer 2 · 2018-05-07T07:24:22.150

1

The issue is in this line:

return this.innerHTML=Date();

because this is just a reference which points to window object.

Use DOM manipulation instead.

function dateFunc() {
   return document.getElementById('result').innerHTML=Date();
}

<button onclick="dateFunc()">The time is?</button>
<div id="result"></div>

edited May 07 '18 at 07:24

answered May 07 '18 at 07:12

Mihai Alexandru-Ionut

41,021
10
77
103

[I'm not sure using `document.write` is a very good idea..](https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) – Chirag Ravindra May 07 '18 at 07:13
@ChiragRavindra, he don't say that we wants to replace the text for button. – Mihai Alexandru-Ionut May 07 '18 at 07:15
i used document.write and it is working. So i wanted to try something like this which didn't involve document.write – Alapan Bag May 07 '18 at 07:20

score 0 · Answer 3 · answered May 07 '18 at 07:27

Within dateFunc(), this is the window, which has no attribute innerHTML.

You could define an additional element to display the time and get that in dateFunc() via documnet.getElementById():

<!DOCTYPE html>
<html>
    <body>

    <button onclick="dateFunc()">The time is?</button>
    <div id="display"></div>

    <script>
        function dateFunc() {
            document.getElementById("display").innerHTML=Date();
        }
    </script>

    </body>
</html>

How to return the system date by clicking a button using a JavaScript function?

3 Answers3