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
– Teemu, Commented Apr 5, 2021 at 8:15
@Teemu — No. window.foo will not let you access a variable declared with let — Quentin
– Quentin, Commented Apr 5, 2021 at 8:21
@Quentin Thanks, i changed them from let to var and it's working — Tom
– Tom, Commented Apr 5, 2021 at 8:25
@Quentin, indeed, I've forgotten that, because I've last used global variables a decade ago. — Teemu
– Teemu, Commented Apr 5, 2021 at 8: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
– Teemu, Commented Apr 5, 2021 at 8:32

Quentin · Accepted Answer · 2021-04-05 08:18:34Z

2

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.

answered Apr 5, 2021 at 8:18

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Over a year ago

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?

Quentin Over a year ago

@Tom — I refer you to the last paragraph of this answer.

Tom Over a year ago

@Qutntin, thank you! You helped me figured it out, i changed it from let to var

Collectives™ on Stack Overflow

Javascript "this" value is undefined in function

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related