Event.target undefined in events

Question

How to use each input values ​​in events ? I hope my lower code will explain you well.

HTML:

 <template name="UpdateAge"> {{#each Name}} <div data-action="showPrompt"> <div> Some content </div> <div> <div> Some content </div> </div> <div> Name : {{name}} Age : <input type="text" name="age" value="{{age}}"/> //I need to access age values in event </div> </div> {{/each}} <template> 

JS:

 Template.UpdateAge.events({ 'click [data-action="showPrompt"]': function (event, template) { console.log(event.target.age.value); // TypeError: event.target.age.value is undefined } }); 

I do not know if my approach is suitable for passing the values ​​of the parameters of events , so suggestions are welcome.

Answer 1

the notation you use is valid only for form elements and when event.target is a form element.

 event.target.age.value 

event.target is the element in which the event occurred, an event. currentTarget is the element that bound the event handler

if you replace div with form and replace target with currentTarget then it will work

 event.currentTarget.age.value 

here is the fiddle using your code

Answer 2

If the event is bound to a div container, then you need to search from the target object, because event.target will provide you with the element to which the event was bound.

To access any value in a div , you must first access this element and then use the properties of this element to access any necessary - .value in this case.