Geolocation doesn't work when put in document.ready

Function getLocation is working when started with button but doesn’t work when putted in "$(document).ready… Why? :smiley:

Here’s the Codepen: CLICK!

You need to use the browser console (not codepen’s console, but the browser console). It’s usually opened with something like ctrl-shft-j. In there you will see an error:

Uncaught ReferenceError: $ is not defined at pen.js:114:100:

Since “$” is jQuery, that is saying that jQuery has not been loaded. Your code never gets past $(document).ready because it doesn’t know what it is and crashes.

In codepen, you load jQuery at settings/javascript/quick-add.

1 Like

OMG, shame on me :confounded::confounded: How could i forgot about this?

It happens. Trust me, it happens.

But I would recommend learning to use the browser console. That is the most valuable debugging tool you can use. And what I did here is only like 2% of it’s abilities. Whenever code doesn’t do what I expect, the browser console is the first place I check. I often have it open while I code, sending console.log statements there to check on things.

3 Likes

If I may ask you something again :sweat_smile: (Yes i was looking onto debugging tool - it is great, i downloaded a special developer edition of one browser). I have a problem with my function called showPosition. She’s very messed up, but i want to make it work and then pratice with cleaning the code. Could you take a look onto my code? HERE. I want to show the temperature and C letter should appear after temperature, then if someone’s click C letter it will change to F, almost the same like example : EXAMPLE . :slight_smile:

Well, with a little monkeying, it works. The problem right now is that you never call the code to put the temp and unit on the screen. It’s inside a click handler for clicking on the units. You’ve got a chicken and egg thing - how can they click on the units to write the units if there is no units to click.

So you need to call that code at some point. I would wrap that code:

      var currentUnit = $("#unit").text(); 
      var newTempUnit = currentUnit == "C" ? "F" : "C";
      $('#unit').text(newTempUnit);
      if(newTempUnit == 'F'){
        $('#temp').html(data.current.temp_f);
      }
      else {
        $('#temp').text(data.current.temp_c);
      }

in a function. I would call that function when you first start (inside the getJSON) and then again inside the click handler. You could write out all the code in both places, but that is bad practice. Better to wrap it in a function that gets called. Let us know if that doesn’t make sense.