CODEWITHSUNDEEP
javascriptinputlistener
sergionni
sergionni

Reputation: 13530

Multiple <input>s with same CSS class updated instead of one specific

Intro
Implementing calendar component in JS.

Use case:
1. User clicks on input,calendar is invoked
2. User selects date
3. Calendar is closed and Date goes to specific input
Problem:
Same Date goes to both inputs

Code:
There are two similar(that is requirement) inputs on the page:

<input class="date"/>
<input class="date"/>

Listeners bound on these inputs this way:

<body onload="FlipCalendar.placeholder('date')"/>

elems[i] is this <input>,that's passed thru functions(in that order):

1. var placeholder = function(className){...}
2. var dateInit = function(calInvoker){...}
3. var selectDay = function(day,calInvoker){...}

Question and Expectations:
The question is why both <input>s updated,when calendar for specific one is invoked?
I assume,that reference to elems[i] is unique,but it happened,that it's referred to all <input>s on the page.

Demo:
live demo

P.S.
Sorry for lot of unstructured code in my demo.
3 functions that I mentioned above are really relevant here.

Upvotes: 3

Views: 147

Answers (1)

Riz
Riz

Reputation: 10246

Here is the working code.

t.addEventListener is replaced with t.onclick.

Upvotes: 1

Related Questions