Блог

Главная - Вопросы по программированию - JS: Созданная переменная не распознает входное значение

JS: Созданная переменная не распознает входное значение

#javascript #class #foursquare

#javascript #класс #foursquare

Вопрос:

Я создаю экземпляр новой переменной из класса. Класс имеет один конструктор city, а затем выбирает джазовые клубы через foursquare API.

Когда я жестко кодирую название города в создаваемом классе, это работает нормально. Но когда я хочу передать ей динамическое значение (запрос из строки поиска, который я получаю через DOM), он не распознает город. Вот код:

Класс: 

 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}amp;categoryId=4bf58dd8d48988d1e7931735amp;client_id=${this.id}amp;client_secret=${this.secret}amp;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?

Кроме того, если у вас есть советы о том, как структурировать этот код лучше или аккуратнее, я был бы рад любым предложениям (определение класса уже находится в отдельном файле).

Большое спасибо, ребята!

Адам

Ответ №1:

Вам нужно убедиться, что следующие инструкции запускаются после нажатия кнопки.

const input = document.getElementById(‘поиск-ввод’).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   "amp;categoryId=4bf58dd8d48988d1e7931735amp;client_id="   id   "amp;client_secret="   secret   "amp;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>

Комментарии:

1. Спасибо! Перемещение экземпляра после события click выполнило свою работу. Хотя странно, что иначе это не сработало бы… Большое спасибо за совет!

2. Иначе это не сработало бы, потому что оно выполняется при загрузке вашей веб-страницы. Он присваивает любое значение, которое текстовое поле содержит в данный момент. В этом случае оно будет неопределенным. Если вы поместите ее после события click, она считывает значение (которое вводится в текстовое поле). Попробуйте присвоить текстовому полю поиска значение по умолчанию и сохранить код в том виде, в каком вы опубликовали. Вы сможете увидеть , как это работает !!

3. @Adam вы можете принять это как правильный ответ, если это решило вашу проблему.