CODEWITHSUNDEEP
javascriptmeteor
Fred J.
Fred J.

Reputation: 6039

extracting data from html click event

This code tries to extract the value stored in {{this.result}} of the attribute value of the html input element
<input type="radio" value={{this.result}}>

Template.options.events({
  'click .twin-item': (event) => {
    let elem = event.target;
    console.log( elem.value);
  }
});

<template name="options">
  <div class="twin-group js-radioGroup" data-id={{_id}}>
    <ul class="upShift">
      {{#each values}}
        <li>
          <label class="twin-item">
            <input type="radio" value={{this.result}}>
            <span class="radio-label">{{this.label}}</span>
          </label>
        </li>
      {{/each}}
    </ul>
  </div>
</template>

But the browser console is printing 2 lines, the first undefined and the second is the value I want.

How can I just get one print out which is the correct value I want? thx

Upvotes: 1

Views: 418

Answers (1)

Jeremy Iglehart
Jeremy Iglehart

Reputation: 4509

Fred,

I believe the reason why is because of event bubbling.

Try this:

Template.options.events({
  'click .twin-item': (event) => {
    event.preventDefault();
    event.stopPropagation();
    let elem = event.target;
    console.log( elem.value);
  }
});

All I added was this event.preventDefault() and event.stopPropagation().

For your application, you might not need the event.preventDefault() you might just need to use the event.stopPropagation() to keep things under control.

You might also try targeting the actual input instead of the label.

Upvotes: 1

Related Questions