Why Is the button returning null values for my event.target in my button?

event.target.value javascript
event.target.value undefined
event.target.value typescript
event target value angular
event target vs currenttarget
event target value vue
event target parent
event.target react

When I'm clicking the button, I am getting that all the values are undefined for the "name" and the "value". I am not sure why, my binding seems correct.

I've tried changing the bindings, I've tried calling an anonymous function for the onClick and passing in the item within my map function. No luck.

import React, { Component } from 'react'

const starterItems = [{ id: 1, name: 'longsword', enhancement: 4 },
{ id: 2, name: 'gauntlet', enhancement: 9 },
{ id: 3, name: 'wizard\'s staff', enhancement: 14 }];


export default class Items extends Component {
  constructor(props) {
    super(props)
    this.handleScoreChange = this.handleScoreChange.bind(this);
    this.state = {
      items: starterItems
    }
  }
  handleScoreChange(e){
    let { name, value } = e.target;
    const id = name;
const newScore = value++;
const items = this.state.items.slice();
items.forEach((item) => {
  if (item[id] === name){
    item.enhancement = newScore
  }
});
this.setState(items);
};



render() {
return (
  <div>
    <h3 data-testid="title">Items</h3>
    {this.state.items.map(item => (
      <div key={item.id}>
        <div name={item.name}data-testid="item">{item.name}</div>
        <div name={item.enhancement}data-testid="enhancement" value= 
{item.enhancement}>{item.enhancement}
        </div>
        <button onClick={this.handleScoreChange}>Enhance</button>
       </div>
    ))}
  </div>

   );

  };
 }

I am expecting the value of the item passed through to +1

e.target is the DOM reference for the button

including name and value as attributes for the div are not necessary

If you want to get the values for the current name and enhancement when clicking you can add a binding

{
  this.state.items.map(item => {
    const onClick = this.handleScoreChange.bind(this, item.name, item.enhancement)
    return (
      <div key={item.id}>
        <div name={item.name}data-testid="item">{item.name}</div>
        <div name={item.enhancement}data-testid="enhancement" value={item.enhancement}>{item.enhancement}</div>
        <button onClick={onClick}>Enhance</button>
      </div>
    )
  )
}
...
handleScoreChange(name, enhancement) {
  // your logic here
}

event.target of lightning-button empty, I am baffled. event.target looks like an empty structure, but querying things like event.target.label and event.target.title just returns values. Definition and Usage. The target event property returns the element that triggered the event. The target property gets the element on which the event originally occurred, opposed to the currentTarget property, which always refers to the element whose event listener triggered the event.

 <button onClick={()=>this.handleScoreChange(...item)}>Enhance</button>

please try this i am sure this will work for you

thanks

Learning Carbon, An integer code (parameter type typeNouseButton) identifying which button was bytes, and a pointer to a memory buffer of that size in which to return the value. can specify NULL for these arguments if you don't need this information or don't provides a default event handler for each type of event target (window, menu,  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

This Solution Worked. Slight modification from what Omar mentioned. Thank you

import React, { Component } from 'react'

const starterItems = [{ id: 1, name: 'longsword', enhancement: 4 },
{ id: 2, name: 'gauntlet', enhancement: 9 },
{ id: 3, name: 'wizard\'s staff', enhancement: 14 }];


export default class Items extends Component {
  constructor(props) {
    super(props)
    this.state = {
      items: starterItems
    }
  }
  enhanceItem(passedItem) {
    const newScore = passedItem.enhancement + 1;
    const items = this.state.items.slice(); /* creates a copy of state that we can change */
    items.forEach((item) => {
      if (item.id === passedItem.id) {
        return item.enhancement = newScore
      }
    });
    this.setState(items);
  };
  render() {
    return (
      <div>
        <h3 data-testid="title">Items</h3>
        {
          this.state.items.map(item => {
            const onClick = this.enhanceItem.bind(this, item)
            /* this line above binds the item with the onClick Function */
            /* notice below, I had to put a return since I added the above code */
            return (
              <div key={item.id}>
                <div data-testid="item">{item.name}</div>
                <div data-testid="enhancement">{item.enhancement}</div>
                {/* We can use the "data=testid" as a way to grab an item, since it won't impact the html any */}
                <button onClick={onClick}>Enhance</button>
              </div>
            )
          })};
        </div>

    );
  };
}

Effective TypeScript: 62 Specific Ways to Improve Your TypeScript, 62 Specific Ways to Improve Your TypeScript Dan Vanderkam. So how do you use a currentTarget // Type is EventTarget const button = e.currentTarget as  The target property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event.

Dynamic HTML: The Definitive Reference: A Comprehensive Resource , Equivalent properties of the IE and Netscape 6 event objects (continued) IEproperty shiftKey srcElement The objector elementintended to receive the event target srcElement : null); if (elem) { // act on element receiving event } Once your script For event data on mouse button or keyboard actions, you can work directly  The button code should be moved to the PlaceholderFragment() class. There you will call the layout fragment_main.xml in the onCreateView method. Like so @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_main, container, false); Button buttonClick = (Button) view.findViewById(R.id.button

How works event.target.value? - JavaScript, (I know my code is wrong) I know that “event” is the argument, but what are setState({event.target.value}) } // change code above this line render() { return  Brother , you are the only person on the internet that managed to interpret for me the way this works. Using a variable in the function name and than using another in the actual function script made absolutely no sense to me !

Event delegation, In the handler we get event.target , see where the event actually happened Naturally, if a click happens on that <strong> then it becomes the value of event.​target . If event.target is not inside any <td> , then the call returns immediately, form </ button > < form id = " subscribe-mail " hidden > Your mail:  null Description. The value null is written with a literal: null. null is not an identifier for a property of the global object, like undefined can be. Instead, null expresses a lack of identification, indicating that a variable points to no object. In APIs, null is often retrieved in a place where an object can be expected but no object is

Comments
  • Thanks for the help, but it said I was trying to spread something that wasn't able to be spread for some reason.
  • okay but i think what i have suggested is similar to above answer :-)