JS：实例化变量无法识别输入值

Question

我正在从 class 实例化一个新变量。 class 有一个构造函数 city，然后通过 foursquare API 获取爵士乐俱乐部。

当我将城市名称硬编码到实例化的 class 中时，它工作正常。但是当我想给它提供一个动态值（我通过 DOM 从搜索栏中获取的查询）时，它不会识别城市。这是代码：

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);
    });
}

有人知道为什么 input 变量的值不能被新实例化的 jazzClubs 变量识别吗？

此外，如果您有关于如何更好或更整洁地构建此代码的提示，欢迎提出任何建议（class 定义已经在单独的文件中）。

非常感谢你们！

亚当

Answer 1

您需要确定，点击按钮后会触发以下语句。

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

const jazzClubs = 新场地（输入）；

您的代码看起来也太复杂了。使用 jquery 使用更简单的代码。尝试这样的事情：

  $(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>

JS：实例化变量无法识别输入值

JS: Instantiated variable won't recognise input value

javascript

class

foursquare