Javascript “this” value is undefined in function Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Javascript “this” value is undefined in function without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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);

Answer

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.

We are here to answer your question about Javascript “this” value is undefined in function - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji