CODEWITHSUNDEEP
javascriptdom-events
Tom
Tom

Reputation: 414

Javascript "this" value is undefined in function

I am trying to access variables set at the "window" level (I believe). I am able to reference these in all functions, but when I try to reference it in a event listener function, the values are undefined. In the below code, the lat and lng values are undefined.

<script>
        let map;
        let lat;
        let lng;
        let location_name;
        let travel_radius;
        let circleObject;

        const source = document.getElementById('travel-radius-value');
        function inputHandler(e) {
        console.log('old travel_radius: ' + this.travel_radius);
          this.travel_radius = e.target.value;
          console.log('updated travel_radius: ' + this.travel_radius);
          let lat = this.lat; //<-UNDEFINED
          let lng = this.lng; //<-UNDEFINED
          circleObject.setMap(null);
          circleObject = new google.maps.Circle({
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillColor: "#FF0000",
                fillOpacity: 0.35,
                map,
                center: {lat, lng},
                radius: this.travel_radius*1000,
          });
        }
        source.addEventListener('input', inputHandler);

Update: new code. lat and lng are still undefined

<script>

        let map;
        let lat;
        let lng;
        let location_name;
        let travel_radius;
        let circleObject;

        const source = document.getElementById('travel-radius-value');
        function inputHandler(e) {
        console.log('old travel_radius: ' + this.travel_radius);
          this.travel_radius = e.target.value;
          console.log('updated travel_radius: ' + this.travel_radius);
          circleObject.setMap(null);
          circleObject = new google.maps.Circle({
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillColor: "#FF0000",
                fillOpacity: 0.35,
                map,
                center: {lat, lng},
                radius: this.travel_radius*1000,
          });
        }
        source.addEventListener('input', inputHandler);

Upvotes: 0

Views: 868

Answers (1)

Quentin
Quentin

Reputation: 943567

The value of this is typically the object on which a method is called. In this case it is the element to which the event listener is bound.

Using this.something accesses a property on whatever object that is.

lat and lng are not properties at all. They are variables. You cannot use this to access them.

Normally you would just use lat and lng to access them, but in this case you have declared to other variables (inside the function) with the same names. This causes the local variables to shadow the ones in the wider scope and makes it impossible to access them.

You therefore also need to rename one of the two sets of variables.

Also note that while this.lat and this.lng are undefined (because those properties don’t exist on the element in the first place) the variables lat and lng (in the wider scope) are also undefined because you initialise them without assigning values to them.

Upvotes: 2

Related Questions