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

Question

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

Ctznkane525 · Accepted Answer · 2020-02-04 01:24:22Z

2

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

answered Feb 4, 2020 at 1:24

Ctznkane525

7,5453 gold badges20 silver badges41 bronze badges

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

Comments

Muhammad Soliman · Accepted Answer · 2020-02-04 01:34:37Z

0

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>

edited Feb 4, 2020 at 1:34

answered Feb 4, 2020 at 1:29

Muhammad Soliman

24k6 gold badges115 silver badges81 bronze badges

3 Comments

Muhammad Soliman Over a year ago

@Dane92 Glad I was able to help

Muhammad Soliman Over a year ago

would appreciate if you can upvote or mark my answer as correct, thanks

Dane92 Over a year ago

Apologies. I'm still getting a handle of this site. I marked your answer as correct. I was unable to upvote since "I have less than 15 reputation"

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related