Event target doesn't exist on the lib dom interface in typescript defintion

by

I’m building out a simple color picker for a front end using typescript. I’m adding an event listener to the color picker input:

The html:

<input id="color-picker" type="color" value="" />

The typescript:

private grabUiElements() {
  this.colorPicker = document.querySelector("#color-picker")
}

private addListners() {
  this.colorPicker?.addEventListener("change", this.updateBrickColor.bind(this))
}

 private updateBrickColor(changeEvent: Event) {
    let hexColor = changeEvent?.target?.value // ! here's where the problem is

    const red = hexColor & 0xFF
    color >>= 8
    const green = hexColor & 0xFF
    color >>= 8
    const blue = hexColor & 0xFF

    doOtherStuff(red,green,blue)
  }

The problem I’m running into is that the typescript compiler is telling me that the event target doesn’t have a value property, but it definitely does have it:

value def exists

I double checked the input change event docs on MDN and they definitely have an example of just this:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event#text_input_element

docs

And I’m definitely using the dom Event interface:

dom event interface

So I’m not sure why I’m getting the error. I know I can use an any for the parameter type, but I’d prefer to know what I’m doing wrong.

5 thoughts on “Event target doesn't exist on the lib dom interface in typescript defintion”

  1. Ah, thanks for the quick replies in the comments.

    I’m not sure how I was supposed to implement the other provided answer:

    change it to changeEvent: ChangeEvent

    but casting suggested in the comments to the question worked fine:

     private updateBrickColor(changeEvent: Event) {
    const target = changeEvent.target as HTMLInputElement
    
    // ? chop off that `#` from the string and parse the rest
    let hexColor = parseInt(target.value.slice(1, target.value.length), 16) 

    const red = hexColor & 0xFF
    hexColor >>= 8
    const green = hexColor & 0xFF
    hexColor >>= 8
    const blue = hexColor & 0xFF
  }

    solved

    I’m good to go, thanks again!

    Reply

Leave a Comment