Getting mad with this 'simple' API's task

Getting mad with this 'simple' API's task
0

#1

Hi, I’m trying to create simple thing, which should work as follows:

  1. click on button
    2.instead of first ‘…’ you’ll receive your geolocation name (City) from one API
  2. instead of second ‘…’ you’ll receive names of mountains name located in range of 70km from your city (using second API but with data received from first)

I can’t manage with third point. Any ideas ?

$.ajax({
			url:"http://ip-api.com/json",
			success:function (data) {
			
			lat = data.lat;
			lon = data.lon;

			$('#geo_view').html(data.city);
			//$('#mountains').html(data.zip);

		},
			
		async:false
	
		});
		
		 var url1 = "http://api.geonames.org/findNearbyJSON?lat=";
			var url2 = "&lng=";
			var url3 = "&featureCode=MTS&radius=70&username=zebru";
			var url = url1 + lat + url2 + lon + url3;

		
 					$.ajax({
						
						url:url,
						success:function (data) {

 							//alert(url);
 							$('#mountains').html(data.toponymName);
 							//alert(data.name);
 					},
						async:false
			
					});

		
		

});

});
<!DOCTYPE html>
<html lang="en">


<head>

	<meta charset="utf-8">
	
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	
	<link rel="stylesheet" href="api_try.css">

	<script src="api_try.js"></script>



</head>


<body>

	<button type="submit" class="form-btn" value="sbutton" onsubmit="">Try!</button>
	
	<div id="geo_view">..</div>
	<div id="mountains">..</div>
		
	
</body>

</html>

#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

You have many syntax and logic errors. I will get you started with one suggestion (see below) and then let you figure out the rest. Make sure to check your browser’s console (Ctrl+Shft+I in Chrome) for any errors which will definitely show up.

You have a button with text of “Try”, but nothing is going to happen, because you do not have the correct code to execute anything. I would suggest getting rid of the onsubmit="" and in your JavaScript section create an event handler referencing the button such as:

$("button").click(function() {

and then all the code you currently have needs to be nested inside this function and then closed with a }); at the very end. And because you had two extra }); at the end anyway that were not doing anything, you can just get rid of one.