Search code examples
javascripthtmlmomentjscountdownjs.js

moment-countdown js library giving me a weird variable assignment?

The library I am using: https://github.com/icambron/moment-countdown

My code:

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <!-- https://github.com/icambron/moment-countdown -->
  <script src="moment.min.js"></script>
  <script src="countdown.min.js"></script>
  <script src="moment-countdown.min.js"></script>
</head>

<body>
  <input type="datetime-local" id="timeInputHTML" onchange="mainfunc()>
  <p id="pel"></p>
  <script>
    function mainfunc() {
      timeVar = document.getElementById("timeInputHTML").value;
      // var timeInputVar = moment("2045-01-01 00:00:00").countdown().toString(); 
      var timeInputVar = moment(timeVar).countdown().toString();
      document.getElementById("pel").innerHTML = timeInputVar;
    }

    // Run above function every 1 second
    setInterval(mainfunc, 1000);
  </script>
</body>

</html>

The question: How do I make the variable timeVar when it obtains its values from timeInputHTML in the HTML code, not contain contain a T in the middle like so: "2018-05-05T14:30" I believe this is what is wrong with my code and is causing the Uncaught TypeError if it is not the issue then please can you explain to me what is please?

The image / screenshot:

Screenshot

Solution 
  • <!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <!-- https://github.com/icambron/moment-countdown -->
  <script src="moment.min.js"></script>
  <script src="countdown.min.js"></script>
  <script src="moment-countdown.min.js"></script>
</head>

<body>
  <input type="datetime-local" id="timeInputHTML" onchange="mainfunc()">
  <p id="pel"></p>
  <script>
    function mainfunc() {
      timeVar = document.getElementById("timeInputHTML").value;
      // var timeInputVar = moment("2045-01-01 00:00:00").countdown().toString(); 
      var timeInputVar = moment(timeVar).countdown().toString();
      document.getElementById("pel").innerHTML = timeInputVar;
    }

    // Run above function every 1 second
    setInterval(mainfunc, 1000);
  </script>
</body>

</html>

    your are missing " this in input function it should be like this

    <input type="datetime-local" id="timeInputHTML" onchange="mainfunc()">