CODEWITHSUNDEEP
javascripthtmltemplatesember.js
Alex Reed
Alex Reed

Reputation: 119

Passing the value of an html element as a parameter in ember

I am sorry if this is a dumb question, but I just can't seem to figure it out. I need to pass the value of the row element to the function it calls, but I can't seem to access the value. I can't give the row a unique id, because my process of adding rows to the table involves duplicating the row and altering its value. Here is my code:

    <tr value = "0" onmouseover={{action 'displayBar' this.value}}>

          //     ^ This is the value I am trying to pass      ^ This is how I am trying to pass it

I have tried this.value, value="target.value", value, etc. but all come out to undefined. The only way I have got the parameter to be undefined is if I just sent "0" as the parameter instead of this.value.

Upvotes: 0

Views: 267

Answers (2)

Gaurav
Gaurav

Reputation: 12796

target.value will only work for input elements. value is not an HTML attribute for elements other than input, so the target does not have a value property equal to the attribute.

You can instead pass the entire target like this:

<tr data-value=0 onmouseover={{action 'displayBar' value="target"}}>

and then in your js:

actions: {
  displayBar(target) {
    const value = target.getAttribute('data-value');
  }
}

Here is a working Ember Twiddle: https://ember-twiddle.com/c177c2be6f7d740968e2f02f79748d83?openFiles=controllers.application.js%2C (Just hover over the "Lots of stuff")

Upvotes: 3

NullVoxPopuli
NullVoxPopuli

Reputation: 65173

does this work:

<tr onmouseover={{action 'displayBar' 0}}>

?

Upvotes: 0

Related Questions