Skip to content

span textContent split returns undefined in javascript funtion

I am trying to help a friend out with the following javascript. We both are new to javascript.

We are trying to convert the date string to a different format. Based on internet search we understand that the date function expects the input string to be Date(year, month, day) format. To achieve that we need to parse the input string and send it in the expected format. We have not got a clue why string split on span tag’s textcontent (that contains the date string) is not working.

<script type="text/javascript">
function ready(callback){

    if (document.readyState!='loading') callback();
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
    });
}
    window.onload = ready(function() {
        var dateString = document.getElementById("dateFormatter").textContent.trim();
        var sMonth = dateString.split("/")[0];
        var sDay = dateString.split("/")[1];
        var sYear = dateString.split("/")[2];
        document.getElementById("dateFormatter").textContent=sMonth;
    });
</script>

The html has the following span tag.

<span id="dateFormatter">26/06/1993</span>

sMonth returns 26/06/1993, whereas sDay and sYear returns undefined.

Answer

The string from your div is invalid format if you want to convert to a datestring. A valid string would be: yyyy-mm-dd. If you have already a dateobject you can use the function to format the date.

Like that:

Update

callback();
window.addEventListener('load', function () {           
      var dateString = document.getElementById("dateFormatter").textContent.trim();
      console.log(dateString)
      let dateArr = dateString.split("/");
      var sDay = dateArr[0];
      var sMonth = dateArr[1];
      var sYear = dateArr[2];
      let newDateString = (sYear + '-' +  sMonth + '-' + sDay);
      let d = new Date(newDateString);
      console.log(d);
      document.getElementById("dateFormatter").textContent=d.toLocaleString();
});
<span id="dateFormatter">26/06/1993</span>

old snippet

function ready(callback) {

    if (document.readyState!='loading') callback();
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
    });
}

    window.onload = ready(function() {
      var dateString = document.getElementById("dateFormatter").textContent.trim();
      console.log(dateString)
      let dateArr = dateString.split("/");
      var sDay = dateArr[0];
      var sMonth = dateArr[1];
      var sYear = dateArr[2];
      let newDateString = (sYear + '-' +  sMonth + '-' + sDay);
      let d = new Date(newDateString);
      console.log(d);
      document.getElementById("dateFormatter").textContent=d;
    });
<span id="dateFormatter">26/06/1993</span>