Javascript "this" value is undefined in function

Question

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

`this` in your code refers to `#travel-radius-value`. Just use the name of the global variable to refer it. If it's shadowed by a local variable, `window.lat/lng/travel_radius` is the way to go. — Teemu, Apr 05 '21 at 08:15
@Teemu — No. `window.foo` will not let you access a variable declared with `let` — Quentin, Apr 05 '21 at 08:21
@Quentin Thanks, i changed them from `let` to `var` and it's working — Tom, Apr 05 '21 at 08:25
@Quentin, indeed, I've forgotten that, because I've last used global variables a decade ago. — Teemu, Apr 05 '21 at 08:29
@Tom That's a bit an opinion, but I'd say yes. `window` object is massively crowded, you can't remove globals, they're not garbage collected, they're exposing your data for easy manipulation (not that anything would be safe in JS in a browser), and you usually don't need globals at all. — Teemu, Apr 05 '21 at 08:32

score 2 · Accepted Answer · answered Apr 05 '21 at 08:18

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.

i updated my code but the lat and lng are still undefined, even when referencing the variables without the `this` keyword. My updated code is in the quetsion. any ideas on how to fix that? — Tom, Apr 05 '21 at 08:21
@Qutntin, thank you! You helped me figured it out, i changed it from `let` to `var` — Tom, Apr 05 '21 at 08:28

Javascript "this" value is undefined in function

1 Answers1