CODEWITHSUNDEEP
javascripthtml
Dane92
Dane92

Reputation: 3

Passing user input to Javascript variable in order to change api results

Like the title suggests, I'm trying to allow the user to manually change the javascript coordinate variables in order to get a list of results based off of the coordinates that they entered. I managed to save latitude and longitude into variables which can be plugged into the api key. However I just can't figure out how to adjust those variables from html so that the user can adjust the coords without having to go into the javascript file. I'll attach the relevant code below. Thanks!

Html

<input id="lat" placeholder="Enter the latitude of your desired hiking location"> 
<input id="long" placeholder="Enter the longitude of your desired hiking location">

<button value="send" id="submit" onclick="latFunc(); longFunc() ">Search</button>

Javascript

let latitude = "40.2398"
    let longitude = "-76.9200"

    function latFunc() {
        let latitude = document.getElementById("lat").value;
        console.log(latitude);
    }

    function longFunc() {
        let longitude = document.getElementById("long").value;
        console.log(longitude);
    }

    latFunc();
    longFunc();

$.getJSON("https://www.hikingproject.com/data/get-trails?lat=" + latitude + "&lon=" + longitude + "&maxDistance=10&key=*****************", function (data) {

Upvotes: 0

Views: 78

Answers (2)

Muhammad Soliman
Muhammad Soliman

Reputation: 23756

Seems like you use jQuery here, here's a complete func handler for click with console to show you the requested URL value. 

 
   
$("#submit").click(function(e) {
 e.preventDefault();

  const latitude = $("#lat").val() ;
  const longitude =$("#long").val();
 console.log(latitude);
  console.log(longitude);
var url = "https://www.hikingproject.com/data/get-trails?lat=" + latitude + "&lon=" + longitude + "&maxDistance=10&key=*****************";
console.log(url);
  
$.getJSON(url, function (data) {
console.log(data);
});

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="lat" value="40.2398" placeholder="Enter the latitude of your desired hiking location"> 
<input id="long" value="-76.9200" placeholder="Enter the longitude of your desired hiking location">

<button value="send" id="submit">Search</button>

But in case you want to stick with what you have done so far: 

function callApi() {
     

       const latitude = document.getElementById("lat").value;
       let longitude = document.getElementById("long").value;
     console.log("latitude: " + latitude);
      console.log("longitude: " + longitude);
    var url = "https://www.hikingproject.com/data/get-trails?lat=" + latitude + "&lon=" + longitude + "&maxDistance=10&key=*****************";
    console.log(url);
      
    $.getJSON(url, function (data) {
    console.log(data);
    });

    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="lat" placeholder="Enter the latitude of your desired hiking location"> 
<input id="long" placeholder="Enter the longitude of your desired hiking location">

<button value="send" id="submit" onclick="callApi() ">Search</button>

Upvotes: 0

Ctznkane525
Ctznkane525

Reputation: 7465

Have your functions return the value, rather than assigning a variable.

function latFunc() {
    return document.getElementById("lat").value;
}

function longFunc() {
    return document.getElementById("long").value;
}

When calling the getJSON, use the values by returning value from lat/long inputs. Assuming this code gets executed on a click handler.

$.getJSON("https://www.hikingproject.com/data/get-trails?lat=" + latFunc() + "&lon=" + longFunc() + "&maxDistance=10&key=*****************", function (data) ...

When you initialize, assign your lat/long. You could also encapsulate this into methods.

document.getElementById("lat").value = "40.6";
document.getElementById("long").value = "-75";

Upvotes: 2

Related Questions