Add Event Listeners-output not getting on codepen

Tell us what’s happening:

passing on fcc but not getting the desired output on codepen despite adding all the setting in js . I find that there are several others who have done on codepen with the same setting that I have done but I am not getting the output. Please help. My codepen pen link is [https://codepen.io/meeramenon07/pen/OJLEBvw]

Your code so far


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ''
    };
    this.handleEnter = this.handleEnter.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }
  // change code below this line
  componentDidMount() {
     document.addEventListener("keydown", this.handleKeyPress)
  }
  componentWillUnmount() {
     document.removeEventListener("keydown", this.handleKeyPress)
  }
  // change code above this line
  handleEnter() {
    this.setState({
      message: this.state.message + 'You pressed the enter key! '
    });
  }
  handleKeyPress(event) {
    if (event.keyCode === 13) {
      this.handleEnter();
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:

In your querySelector use .yourClassName for class, #yourId for id. Fix that and it works fine.

[https://codepen.io/meeramenon07/pen/OJLEBvw]

I tried to fix as per id and class but still my pen not giving the output, what is wrong now? Thanks.:slight_smile:

It works for me, you have the correct code. Click on the white area so the focus is in your app, and not in your code, and hit enter.

If it is not working maybe it is a browser issue? I’m using Firefox.

Oh Yes!! I hit on the white area and it worked!! Thanks a ton !!! Really appreciate your suggestion!

1 Like