JS: Instantiated variable won't recognise input value

I am instantiating a new variable from a class. The class has one constructor, city and then fetches jazz clubs through the foursquare API.

When I hard-code the city name into the instantiated class, it works fine. But when I want to feed it a dynamic value (a query from the search bar which I grab through the DOM), it won't recognise the city. Here is the code:

The Class:

class Venues {
constructor(city) {
    this.id = '...';
    this.secret = '...';
    this.city = city;
}
async getVenues() {
    const response = await  fetch(`https://api.foursquare.com/v2/venues/search?near=${this.city}&categoryId=4bf58dd8d48988d1e7931735&client_id=${this.id}&client_secret=${this.secret}&v=20190309`);

    const venues = await response.json();

    return venues;
  }
}

const input = document.getElementById('search-input').value;
const button = document.getElementById('button');

const jazzClubs = new Venues(input);

button.addEventListener('click', (e) => {
    e.preventDefault();

    getJazzVenues();

})

function getJazzVenues() { 
jazzClubs.getVenues()
    .then(venues => {
        console.log(venues);
    })
    .catch(err => {
        console.log(err);
    });
}

Anyone knows why the the input variable's value is not recognised by the newly instantiated jazzClubs variable?

Also, if you have tips on how to structure this code better or neater, I'd welcome any suggestions (the class definition is in a separate file already).

Many thanks guys!

Adam

Solution

You need to make sure, the following statements are triggered after the button click.

const input = document.getElementById('search-input').value;

const jazzClubs = new Venues(input);

Also your code looks too complex. Use simpler code using jquery. Try something like this:

  $(document).ready(function() {

    $("#search-button").click(function() {
      var searchval = $("#search-input").val();
      var id = "xxx";
      var secret = "yyy";
      alert(searchval);
      var url = "https://api.foursquare.com/v2/venues/search?near=" + searchval + "&categoryId=4bf58dd8d48988d1e7931735&client_id=" + id + "&client_secret=" + secret + "&v=20190309";
      alert(url);
      $.ajax({
        url: url,
        dataType: 'json',
        success: function(data) {
          var venues = data.response.venues;
          alert(venues);
          $.each(venues, function(i, venue) {
            $('#venue-result').append(venue.name + '<br />');
          });
        }
      });

    });
  });

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <label>City:</label>
  <input type="text" id="search-input" />
  <button type="button" id="search-button">Search</button>
  <div id="venue-result"></div>
</body>

</html>