which values are available in event.target and how to access it

Question

i am following an online workshop and examples which you can find it here:

https://openlayers.org/en/latest/examples/mouse-position.html

in the example posted in the above mentioned link, in both of the functions

var projectionSelect = document.getElementById('projection');
projectionSelect.addEventListener('change', function (event) {
  mousePositionControl.setProjection(event.target.value);//<------HERE
});

And

var precisionInput = document.getElementById('precision');
precisionInput.addEventListener('change', function (event) {
  var format = createStringXY(event.target.valueAsNumber);//<------HERE
  mousePositionControl.setCoordinateFormat(format);
});

the following attributes were used respectively

 event.target.value , event.target.valueAsNumber
 

however, when i tried to run the code in visual studio codes, it underscores both of

 .value  and .valueAsNumber 
 

with red, which mean such attriburtes do not exist. please let me know which attributes are valid to be used so i can have access to the values contained in

 event.target
 

code :

ngOnInit(){
    this.todaydate2 = this.myservice.showTodayDate();
    this.value = this.myservice.observablesTest();

    var mousePositionControl = new MousePosition({
      className: 'custom-mouse-position',
      coordinateFormat: createStringXY(7),
      projection: 'EPSG:4326',
      // comment the following two lines to have the mouse position
      // be placed within the map.
      target: document.getElementById('mouse-position'),
      undefinedHTML: '',//for what to be rendered when the mouse leaves map scope: values https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
    });

    this.map = new Map({
      controls: defaultControls().extend([mousePositionControl]),
      target: 'map-container',
      layers: [
        new TileLayer({
          source: new XYZSource({
            url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
          })
        })
      ],
      view: new View({
        center: fromLonLat([13.2232,52.4059]),
        zoom: 6
      })
    });

    var projectionSelect = document.getElementById('projection');
    projectionSelect.addEventListener('change', function (event) {
      mousePositionControl.setProjection(event.target);
    });

    var precisionInput = document.getElementById('precision');
    precisionInput.addEventListener('change', function (event) {
    var format = createStringXY(event.target);
    mousePositionControl.setCoordinateFormat(format);
    });
}

Answer 1

i solved this problem via type casting as follows:

mousePositionControl.setProjection((event.target as HTMLInputElement).value);
var format = createStringXY((event.target as HTMLInputElement).value);

Answer 2

The target in event.target is of type EventTarget and every HTMLElement inherits from it. Therefore, any HTML element you receive with document.getElementById() method is an EventTarget and the available properties will vary based on the specific element type . The documentations -

• EventTarget
• HTMLElement

With the following code -

var projectionSelect = document.getElementById('projection');
projectionSelect.addEventListener('change', function (event) {
    mousePositionControl.setProjection(event.target.value);
});

even though at runtime you'll receive a specific type of HTMLElement through the event.target , at compile time it represents just an EventTarget , and as you can see from the documentation, EventTarget does not have a property named value .

If you put the above code in a JavaScript file and open it in VS Code, it will not complain about the value , because JavaScript is a dynamically typed language and VS Code is not trying to enforce type checking.

But if you put the same code in a TypeScript file, VS Code will try to apply type checking and find out that EventTarget does not have a value property.

To mitigate the error VS Code is showing you can cast event.target as any , and an any type can have any property -

mousePositionControl.setProjection((event.target as any).value);

Or, since you know that the elements returned by your document.getElementById() methods represent a select element and an input element, you can cast them as HTMLSelectElement and HTMLInputElement -

mousePositionControl.setProjection((event.target as HTMLSelectElement).value);

// and
var format = createStringXY((event.target as HTMLInputElement).valueAsNumber);