Check if NaN without real variable

Question

I have a TIMER (JSFiddle), that takes a date and time and then counts the hours from the starting date / time the current date / time.

In my fiddle it just counts away from January 01, 2020 14:00:00, but on my website the user is able to change this date. – When he enters invalid information the timer outputs NaN.

When the users enters information, the timer is run again and the user get a new output. – When this happens, I would like to check, if the output is NaN, if so, I would like for another function to ben run, let's call it: timerError() – With this I will reset the timer and tell the user, that his input was invalid.

I know about isNaN(variable), but I don't really have a variable here, so don't know how to check, if the timer output is NaN…

This is my JS:

                // TIMER Styling START
                function styleChars(targetEl) {
                    const val = targetEl.textContent;
                    const chars = val.split('');
                    targetEl.innerHTML = chars.map(c => `<span class="digit">${c}</span>`).join('');
                }
                
                const target = document.querySelector('.value_timer');
                console.log(target);
                styleChars(target);
                // TIMER Styling END
                
                // TIMER START
                var timerDate = "January 01, 2020 14:00:00";
                
                    function setTimer() {
                        // Month Day, Year Hour:Minute:Second, id-of-element-container.
                        countUpFromTime(timerDate, 'countup1');
                    };
                    
                    window.onload = setTimer();
                    
                    function countUpFromTime(countFrom, id) {
                        let countDate = new Date(countFrom);
                        let now = new Date();
                        let timeDifference = (now.getTime() - countDate.getTime());

                        let value_timer = Math.floor(timeDifference / 1000 / 60 / 60);

                        let idEl = document.getElementById(id);
                        idEl.innerHTML = value_timer;
                        styleChars(idEl); // Pass element to styling function.

                        clearTimeout(countUpFromTime.interval);
                        countUpFromTime.interval = setTimeout(function () {
                            countUpFromTime(countFrom, id);
                        }, 1000);
                    }
            
                // TIMER END

What do you mean by "I don't really have a variable here" ? Can't you use `isNaN(timeDifference)` ? — Seblor, Jun 27 '20 at 11:06
@Seblor Maybe I made a mistake, but I tried it: https://jsfiddle.net/aqto3kr6/ and unfortunately this does not work. — Simon R., Jun 27 '20 at 11:11
@SimonR. You should make the check and error handling before making all the calculus and printing the value, not at the bottom of everything. — Cristian Sarghe, Jun 27 '20 at 11:14
The output basically is a span with the `id="countup1"` and then multiple spans inside that one, for each number, all with the `class="digit"`. – I have to admit, I'm still new to JS and I copied this code together and I do not fully understand every part of it. — Simon R., Jun 27 '20 at 11:15
@CristianSarghe When the user finishes typing in the new date, the function `setTimer()` is run. I tried putting the check at the start of that, but that didn't work… Maybe I'm also doing something wrong, could you maybe make a fiddle? — Simon R., Jun 27 '20 at 11:19

Cristian Sarghe · Accepted Answer · 2020-06-27T11:38:12.487

2

The problem is that if timerDate is not a valid date string format, new Date(timerDate) will return an InvalidDate.

In your code, you need to check if countDate which is new Date(timerDate) is an Invalid Date. If so, handle the error accordingly.

You can check by verifying isNaN(countDate.getTime()). It should be true if the Date is invalid.

EDIT: I have created a Fiddle that makes your code compliant with the changes.

edited Jun 27 '20 at 11:38

answered Jun 27 '20 at 11:11

Cristian Sarghe

782
6
15

Thank you, for your answer! – I tried this, but I think I'm doing something wrong? https://jsfiddle.net/bpc8wtxh/ – Simon R. Jun 27 '20 at 11:28
@SimonR. I have edited my answer to include a Fiddle. Please check it – Cristian Sarghe Jun 27 '20 at 11:38
I'm sorry, I still don't get it. I see your fiddle is working and I want to edit this on: https://jsfiddle.net/bpc8wtxh/ so that the `test()` function, that's being run, when I click on the button, outputs one of two alerts, but I can't get it to work. – Your using `if (isNaN(countDate.getTime()))` to check if it is `NaN` but how? – I thought you would need something like: `if (isNaN(countDate.getTime()) === true)` – Why don't you have to compare it to something. / Again, still new to JS. – Simon R. Jun 27 '20 at 11:55
@SimonR. Alright, you should understand how `setTimeout` works in the context of sync/async programming. You can also see that `countDate` does not exist outside the `countUpFromTime` function, which means you can not access it there, which is why JavaScript says it's `undefined` and does not have a `getTime()` child method. Check this Fiddle: https://jsfiddle.net/cq083v5o/ for a working version and a few code comments. Also, check Mozilla's documentation for Javascript Truthy values to understand why `=== true` is irrelevant there: https://developer.mozilla.org/en-US/docs/Glossary/Truthy – Cristian Sarghe Jun 27 '20 at 12:16
Thank you, so much! – Simon R. Jun 27 '20 at 12:34

Check if NaN without real variable

1 Answers1