家电商城订单数量输入框JS问题：AJAX成功函数关联触发元素

Hey there! Let's work through this problem together. The core issue here is that your checkStock callback can't reference the specific input that triggered the change event—right now it's just grabbing the first .quantity input, which won't work for dynamically generated order lines. Plus, there's a small typo that's breaking your AJAX data. Let's fix this step by step.

First, Fix the Typo #

In your getStock function, you wrote evet.target.id instead of evt.target.id—that's a typo that will cause your AJAX request to send incorrect data. Let's correct that first.

Solution 1: Use a Closure to Capture the Current Input #

The simplest way is to save the triggering input element in the getStock function, then use an anonymous success callback that can access this variable via closure. This way, you're always referencing the exact input that was changed.

Here's the updated code:

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) { 
  // Capture the specific input that triggered the event
  const currentInput = evt.target;
  
  $.ajax("../api/GetStockArticle", { 
    data: {'cart': currentInput.id}, // Fixed the typo here
    dataType: 'text', 
    cache: false, 
    success: function(stock) { 
      // Convert values to integers to avoid string comparison bugs
      const stockQty = parseInt(stock);
      const inputQty = parseInt(currentInput.value);
      
      if (stockQty < inputQty) { 
        currentInput.style.color = "#C02C11"; 
      } else { 
        currentInput.style.color = "black"; 
      } 
    }, 
    error: function (xhr, status, ex) { 
      alert("Error (" + xhr.status + "):" + status); 
    } 
  }); 
}

Solution 2: Pass the Input to checkStock Explicitly #

If you want to keep the checkStock function separate, you can pass the current input to it using an arrow function (or Function.bind()) in the success callback. This keeps your code modular while still referencing the correct input.

Updated code for this approach:

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) { 
  const currentInput = evt.target;
  
  $.ajax("../api/GetStockArticle", { 
    data: {'cart': currentInput.id}, // Fixed typo
    dataType: 'text', 
    cache: false, 
    // Use arrow function to pass both stock and currentInput to checkStock
    success: (stock) => checkStock(stock, currentInput), 
    error: function (xhr, status, ex) { 
      alert("Error (" + xhr.status + "):" + status); 
    } 
  }); 
} 

function checkStock(stock, input) { 
  const stockQty = parseInt(stock);
  const inputQty = parseInt(input.value);
  
  if (stockQty < inputQty) { 
    input.style.color = "#C02C11"; 
  } else { 
    input.style.color = "black"; 
  } 
}

Key Notes to Avoid Bugs #

• Convert Values to Integers: The API returns stock as text, and input.value is also a string. If you compare them directly (e.g., "10" vs "2"), you'll get incorrect results because string comparison checks character order. Always use parseInt() (or Number()) to convert them to numbers first.
• Dynamic Elements: Since your order lines are dynamic, make sure that when you add new .quantity inputs after page load, you also attach the change event listener to them (your current window.onload code only binds to existing inputs).

内容的提问来源于stack exchange，提问作者A.Martinez