javascript - pass a value from text input box to a variable, for use in Fetch API

Question

I have an input box with button. When I enter an input, i want that input to be passed to a variable called 'town' that i can use in my fetch API call. When i try this, it says the variable is undefined. To test, i can get the Fetch API to work if i define the variable 'town' as 'garstang' e.g. var town ='garstang';

But i want to make 'town' get its input from the result of my input box, which is 'inputVal'.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="js.js"></script>
  <title>Javascript Calling APIs</title>
</head>

<body>
  <h1>Test</h1>

  <p id="demo"></p>

  <input type="text" placeholder="Type something..." id="myInput">
  <button type="button" onclick="getInputValue();">Get Value</button>

  <script>
    function getInputValue() {
      // Selecting the input element and get its value
      var inputVal = document.getElementById("myInput").value;

      // Displaying the value
      alert(inputVal);
    }
  </script>

  <script>
    var myHeaders = new Headers();
    myHeaders.append("x-rapidapi-key", "insert_key_here");

     var town ='garstang';
    // var town = inputVal;

    var url = "https://wyre-data.p.rapidapi.com/restaurants/town";

    var requestOptions = {
      method: 'GET',
      headers: myHeaders,
      redirect: 'follow'

    };

    fetch(url + '/' + town, requestOptions)
      .then(response => response.text())
      // .then(result => console.log(result))
      .then(result => document.getElementById("demo").innerHTML =
        "<strong>The answer is: </strong>" + (result))
      .catch(error => console.log('error', error));
  </script>
  <h2>The End...</h2>
</body>
</html>

Your fetching script executes before any manipulation with input field. — Alexander Smirnov
– Alexander Smirnov, Commented Oct 1, 2020 at 19:29

Alexander Smirnov · Accepted Answer · 2020-10-01 19:35:17Z

Your fetching script executes before any manipulation with input field. I moved code related to api call after pressing button.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="js.js"></script>
    <title>Javascript Calling APIs</title>
  </head>
  <body>
    <h1>Test</h1>

    <p id="demo"></p>

    <input type="text" placeholder="Type something..." id="myInput">
    <button type="button" onclick="getInputValue();">Get Value</button>

    <script>
      function getInputValue() {
        // Selecting the input element and get its value
        var inputVal = document.getElementById("myInput").value;

        // Displaying the value
        alert(inputVal);
        
        var myHeaders = new Headers();
        myHeaders.append("x-rapidapi-key", "insert_key_here");

        //var town ='garstang';
        var town = inputVal;

        var url = "https://wyre-data.p.rapidapi.com/restaurants/town";

        var requestOptions = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'

        };

        fetch(url + '/' + town, requestOptions)
          .then(response => response.text())
          // .then(result => console.log(result))
          .then(result => document.getElementById("demo").innerHTML =
            "<strong>The answer is: </strong>" + (result))
          .catch(error => console.log('error', error));  
      }
    </script>
    <h2>The End...</h2>
  </body>
</html>

Joko · Accepted Answer · 2020-10-01 19:51:28Z

1

The inputVal you declared in the getInputValue function become local to the function. That means it's not possible to access it from other scripts

See following link for more detailed explanation: https://www.w3schools.com/js/js_scope.asp

Possible solutions:

You put everything in one script.
Or instead of var town = inputVal you do var town = document.getElementById("myInput").value

answered Oct 1, 2020 at 19:51

Joko

658 bronze badges

Collectives™ on Stack Overflow

javascript - pass a value from text input box to a variable, for use in Fetch API

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related