span textContent split 在 javascript 函数中返回未定义

Question

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 1

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:

 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>

Answer 2

The problem is that you're setting the textContent of the span to only show the value of sMonth and when that happens, the span will only have "26" as its body (whitch btw is wrong if you write dates like so) - and actually should not be "26/06/1993" if the code is right.

Also, if you want to run the script multiple times, try setting the span's textContent to sDay+"/"+sMonth+"/"+sYear so it's the same formatting you expect the script to work with. The code you provided sets the span's value to "26" then if you run it again, it tries to split "26" along "/"-s, which of course ends up being incorrect.