CODEWITHSUNDEEP
javascriptjquery
user3785004
user3785004

Reputation: 45

JavaScript split input's attribute into array and output

Codepen Link

JSFiddle Link

The goal:

Create dynamically refreshing output with split year-month-day from the input field.

Description:

Do not pay attention to any code at CodePen above the comment at line 40;

I got an input. Whenever the user picks a date with the initialized datepicker, the input gains data-date attribute with YYYY-mm-dd format. Ok, perfect.

I want to create an output to a div based on this data-date attribute.

So I wrote the following code:

function summaryOutput() {
    var output       = $( '#output' );
    var end          = $( '#end' );

    end.on('change', function() {
        var endString    = end.attr('data-date');
        var endSplit     = endString.split('-');
        var year         = endSplit[0];
        var month        = endSplit[1];
        var day          = endSplit[2];

        output.text(year);
    });

}

It is pretty straightforward.

This function is not invoked in the codepen

Invoke it and try to select a date and see an error:

Uncaught TypeError: Cannot read property 'split' of undefined

And what is more, data-date attribute cease to apply.

What is more confusing, it works in the console. I mean, if you select a date in the datepicker and then step by step initialize all the variables and then will, for example, see what is in the month variable, you'll get the result.

But it ceases to work in the real document.

So am, where am I wrong?

Upvotes: 1

Views: 119

Answers (1)

Aaroh Mankad
Aaroh Mankad

Reputation: 176

You need to add a data-date attribute in your input tag.

Change the input tag to look like this:

<input type="text" id="end" data-date="">

Upvotes: 2

Related Questions