Текущий ввод Javascript / AJAX для функции успеха AJAX
Я пишу статью об онлайн-магазине электроприборов. У меня смоделирован текущий порядок, но есть некоторые проблемы с этим кодом Javascript. Предполагается изменить цвет на входе, если реальный запас (в базе данных, который контролируется сервлетом / api / GetStockArticle) ниже текущего числа на входе. Я добавляю это событие ко всем входам, которые у меня могут быть, которые являются динамическими, так как это зависит от количества строк в моем текущем заказе.
window.onload = function () {
var inputs= document.getElementsByClassName("quantity");
for (var i = 0, n = inputs.length; i < n; i++) {
inputs[i].addEventListener("change", getStock, false);
}
}
function getStock(evt) {
$.ajax("../api/GetStockArticle", {
data: {'cart': evet.target.id},
dataType: 'text',
cache: false,
success: checkStock,
error: function (xhr, status, ex) {
alert("Error (" + xhr.status + "):" + status);
}
});
}
function checkStock(stock) {
//var input = document.getElementsByClassName("quantity");
if (stock < input[0].value) {
input[0].style.color = "#C02C11";
} else {
input[0].style.color = "black";
}
}
Моя основная проблема здесь в том, что внутри функции checkStock (которая является функцией успеха) я хочу сослаться на тот же ввод, значение которого изменилось, и я понятия не имею, как это сделать. Я неправильно использую свой код?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Сначала подготовьте свою функцию, чтобы она принимала входные данные в качестве параметра:
function checkStock(input, stock) {
if (stock < input.value) {
input.style.color = "#C02C11";
} else {
input.style.color = "black";
}
}
А затем просто привяжите его при передаче в качестве обратного вызова:
success: checkStock.bind(null, evt.target)
В качестве альтернативы вы можете использовать каррирование или использовать область видимости и замыкания:
function getStock(evt) {
const input = evt.target;
$.ajax("../api/GetStockArticle", {
data: {'cart': evet.target.id},
dataType: 'text',
cache: false,
success: function(stock) {
if (stock < input.value) {
input.style.color = "#C02C11";
} else {
input.style.color = "black";
}
},
error: function (xhr, status, ex) {
alert("Error (" + xhr.status + "):" + status);
}
});
}