JavaScript prevent button event on specified conditions-CodePudding

I have a webshop-like shopping cart function. It displayas the products that you have added. You can change the product quantity by clicking on the and the - buttons. On button click, an AJAX call will be sent to a PHP file that updates the database so you instantly save the actual quantity. As you increase or decrease the selected quantity, a counter appears to indicate how many times the original product will be multiplied. You can increase or decrease the quantity between 1 and 30. As you reach for example 1, the counter stops, but the AJAX call will be sent regardless it shouldn't go below 1.

Preview video

let subt = 30; // The value from PHP after you sent the AJAX call and reloaded the page
document.getElementById("plus").addEventListener("click", () => {
  if (document.getElementById("inp").value < 30) {
    document.getElementById("inp").value = Number(document.getElementById("inp").value)   1;
  }
  if (document.getElementById("inp").value > 1) {
    /*
        var bsi__data = new FormData(); bsi__data.append("pid", '(product id)'); bsi__data.append("quantity", document.getElementById("inp").value); bsi__data.append("price", "30");
        $.ajax({
            enctype: "multipart/form-data", type: "POST", url: "/assets/php/basket/q__up.php", data: bsi__data, dataType: "json", contentType: false, processData: false,
            success: function(data) { console.log(data); subt  = Number('30'); document.getElementById("subtotal").textContent = formatter.format(subt); },
            error: function (data) { console.log("error"); console.log(data); }
        });
        */
    subt  = Number('30');
    document.getElementById("subtotal").textContent = subt;
    document.getElementById("ind").textContent = "x "   document.getElementById("inp").value;
  }
  if (document.getElementById("inp").value == 1) {
    document.getElementById("ind").textContent = "";
  }
});
document.getElementById("min").addEventListener("click", function dicr() {
  if (document.getElementById("inp").value > 1) {
    document.getElementById("inp").value = Number(document.getElementById("inp").value) - 1;
  }
  if (document.getElementById("inp").value >= 1) {
    /*
    var bsi__data = new FormData(); bsi__data.append("pid", "(product id)"); bsi__data.append("quantity", document.getElementById("inp").value);
    $.ajax({
        enctype: "multipart/form-data", type: "POST", url: "/assets/php/basket/q__up.php", data: bsi__data, dataType: "json", contentType: false, processData: false,
        success: function(data) { console.log("decr"); subt -= Number(30); document.getElementById("subtotal").textContent = formatter.format(subt); },
        error: function (data) { console.log("error"); console.log(data); }
    });
    */

    subt -= Number(30);
    document.getElementById("subtotal").textContent = subt;
    document.getElementById("ind").textContent = "x "   document.getElementById("inp").value;
  }
  if (document.getElementById("inp").value == 1) {
    document.getElementById("ind").textContent = "";
  }
});

<div>
  <span>Product name</span><span id="price">$30</span><span id="ind"></span>
  <div>
    <span id="plus"> </span>
    <input type="number" id="inp" min="1" max="30" value="1" />
    <span id="min">-</span><br><br>
    <span>Subtotal: $</span>
    <span id="subtotal">30</span>
  </div>
</div>

CodePudding user response：

https://jsfiddle.net/jnerx76z/

document.getElementById("plus").addEventListener("click", () => {
  if (document.getElementById("inp").value < 30) {
    document.getElementById("inp").value = Number(document.getElementById("inp").value)   1;
  }
  if (document.getElementById("inp").value > 1) {
    /*
        var bsi__data = new FormData(); bsi__data.append("pid", '(product id)'); bsi__data.append("quantity", document.getElementById("inp").value); bsi__data.append("price", "30");
        $.ajax({
            enctype: "multipart/form-data", type: "POST", url: "/assets/php/basket/q__up.php", data: bsi__data, dataType: "json", contentType: false, processData: false,
            success: function(data) { console.log(data); subt  = Number('30'); document.getElementById("subtotal").textContent = formatter.format(subt); },
            error: function (data) { console.log("error"); console.log(data); }
        });
        */
    subt  = Number('30');
    document.getElementById("subtotal").textContent = subt;
    document.getElementById("ind").textContent = "x "   document.getElementById("inp").value;
  }
  if (document.getElementById("inp").value == 1) {
    document.getElementById("ind").textContent = "";
  }
});
document.getElementById("min").addEventListener("click", function dicr() {
    var newValue;
  if (document.getElementById("inp").value > 1) {
    newValue = Number(document.getElementById("inp").value) - 1;
    document.getElementById("inp").value = newValue;
  }
  if (newValue >= 1) {
  alert(newValue)
    /*
    var bsi__data = new FormData(); bsi__data.append("pid", "(product id)"); bsi__data.append("quantity", document.getElementById("inp").value);
    $.ajax({
        enctype: "multipart/form-data", type: "POST", url: "/assets/php/basket/q__up.php", data: bsi__data, dataType: "json", contentType: false, processData: false,
        success: function(data) { console.log("decr"); subt -= Number(30); document.getElementById("subtotal").textContent = formatter.format(subt); },
        error: function (data) { console.log("error"); console.log(data); }
    });
    */

    subt -= Number(30);
    document.getElementById("subtotal").textContent = subt;
    document.getElementById("ind").textContent = "x "   document.getElementById("inp").value;
  }
  if (document.getElementById("inp").value == 1) {
    document.getElementById("ind").textContent = "";
  }
});

CodePudding user response：

The simple way to do what you require is to use Math.min() and Math.max() to set the allowable extents of the field. Then you amend your logic to calculate the subtotal based on the value of that field as it gets updated, not by maintaining a global variable.

Also note that you should put Element objects which you reference commonly in your code in to variables. This makes your code much shorter and easier to read, and it makes it more performant as accessing the DOM is a relatively slow operation which should be avoided as much as possible.

With this said, here's a working example:

let inp = document.querySelector('#inp');
let ind = document.querySelector('#ind');
let subtotal = document.querySelector('#subtotal');
let minQty = 0;
let maxQty = 30;
let itemCost = 30;

document.querySelector("#plus").addEventListener("click", () => {
  inp.value = Math.min(maxQty, Math.max(minQty,  inp.value   1));
  updateSubtotalUI();
});

document.getElementById("min").addEventListener("click", function dicr() {
  inp.value = Math.min(maxQty, Math.max(minQty,  inp.value - 1));
  updateSubtotalUI();
});

let updateSubtotalUI = () => {
  let subt = inp.value * itemCost;
  subtotal.textContent = subt.toLocaleString();
}

<div>
  <span>Product name</span>
  <span id="price">$30</span>
  <span id="ind"></span>
  <div>
    <span id="plus"> </span>
    <input type="number" id="inp" min="1" max="30" value="1" />
    <span id="min">-</span><br><br>
    <span>Subtotal: $</span>
    <span id="subtotal">30</span>
  </div>
</div>