Почему input.val() нельзя сохранить как глобальную переменную?
Я делаю несколько вызовов API сопоставления, используя значение поля ввода (которое является почтовым индексом) и передаю его в качестве аргумента для URL-адреса API. Я также сохраняю почтовый индекс в localStorage, чтобы использовать его для отображения в других местах.
Когда я устанавливаю var userPostalCode = $('#input').val() в качестве глобальной переменной, ничего не работает. Я даже поместил event.preventDefault() в свою функцию обработчика кликов, чтобы попытаться обойти это. Однако, когда я устанавливаю переменную для функции, она работает. Проблема здесь в том, что это не DRY, так как мне приходится повторять одну и ту же строку для каждого вызова API.
Как я могу а) сделать это СУХИМ и б) не могли бы вы объяснить, почему я не могу использовать его как глобальную переменную? Абстрагированный код ниже для контекста:
// Fires call to all API functions and renders page
myBtn.click(function(event) {
event.preventDefault();
// Runs mapping functions
firstAPICall();
secondAPICall()
saveToLocalStorage()
});
function firstAPICall() {
var userPostalCode = $('#input').val();
var FIRST_URL = `https://anotherwebsite.com/query=${userPostalCode}&limit=6&api_key=${API_KEY}`;
$.ajax({
url: FIRST_URL,
method: "GET"
}).then(function(response) {
// Code block
});
};
function secondAPICall() {
var userPostalCode = $('#input').val();
var SECOND_URL = `https://somewebsite.com/location=${userPostalCode}&api_key=${API_KEY}`;
$.ajax({
url: SECOND_URL,
method: "GET"
}).then(function(response) {
// Code block
});
};
function saveToLocalStorage() {
var userPostalCode = $('#input').val();
savedSearches.push(userPostalCode);
localStorage.setItem("zipCode", JSON.stringify(savedSearches));
};
(Мне непонятно, что вы ожидаете от event.preventDefault()? Для нажатия кнопки, которое предотвратило бы всплытие события щелчка на родительские элементы DOM, но это вообще не имеет отношения к проблеме здесь.)
Когда вы используете объявление var, вы создаете локальную переменную, а не назначаете глобальную переменную.
Почему вы хотите, чтобы это была глобальная переменная? Глобальные переменные обычно имеют плохой дизайн. Если вы не хотите повторять var userPostalCode = $("#input").val(), сделайте это в обработчике кликов, а затем передайте его в качестве параметра другим функциям.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Чтобы получить DRY-код, получите значение в обработчике кликов и передайте его в качестве параметра.
// Fires call to all API functions and renders page
myBtn.click(function(event) {
event.preventDefault();
let userPostalCode = $('#input').val();
// Runs mapping functions
firstAPICall(userPostalCode);
secondAPICall(userPostalCode)
saveToLocalStorage(userPostalCode)
});
function firstAPICall(userPostalCode) {
var FIRST_URL = `https://anotherwebsite.com/query=${userPostalCode}&limit=6&api_key=${API_KEY}`;
$.ajax({
url: FIRST_URL,
method: "GET"
}).then(function(response) {
// Code block
});
};
function secondAPICall(userPostalCode) {
var SECOND_URL = `https://somewebsite.com/location=${userPostalCode}&api_key=${API_KEY}`;
$.ajax({
url: SECOND_URL,
method: "GET"
}).then(function(response) {
// Code block
});
};
function saveToLocalStorage(userPostalCode) {
savedSearches.push(userPostalCode);
localStorage.setItem("zipCode", JSON.stringify(savedSearches));
};Спасибо за объяснение, что var создает локальную переменную, я не знал об этом. Кроме того, ваше решение идеально и научило меня мыслить нестандартно.
Похоже, вы дали нам код, который работает, а не код, с которым вам нужна помощь. Не могли бы вы поделиться минимально воспроизводимым примером кода, который не работает, чтобы нам не пришлось гадать, что вы сделали не так? Я предполагаю, что вы пытались установить
var userPostalCode = $('#input').val()до того, как это поле формы имело значение, и ожидали, что переменная будет обновляться при изменении поля ввода, чего не будет; но не видя кода это всего лишь предположение.