Question

只是试图找到一种方法来向现有的Var！中添加“使用产品增加成本”按钮。

function Total(qty, ud, total, value, cart) {
  qty = document.getElementById("qty",);
  ud > 0 ? qty.value++ : qty.value--;
  qty.value = Math.max(qty.value, 0);
  document.getElementById("total",).value = qty.value * value, Boys_Toys;

}

<div class="slider-vertical"></div>
<div id="purhcaseForm">
  <form id="purchase">
    <br> Item Price: $250
    <br> Please Select Quantity
    <input type='button' name='subtract' onclick='Total("qty",-1,"total",250);' value='-' />
    <input type='button' name='add' onclick='Total("qty",1,"total",250);' value='+' />
    <input type='text' name='qty' id='qty' readonly=true value="0" />
    <input type='text' name='total' id='total' value="0" />
  </form>
</div>

Answer 1

这是您要寻找的吗？只是一个错字！

function Total(qty, ud, total, value, cart) {
  qty = document.getElementById("qty",);
  ud > 0 ? qty.value++ : qty.value--;
  qty.value = Math.max(qty.value, 0);
  document.getElementById("total",).value = qty.value * value;

}

<div class="slider-vertical"></div>
<div id="purhcaseForm">
  <form id="purchase">
    <br> Item Price: $250
    <br> Please Select Quantity
    <input type='button' name='subtract' onclick='Total("qty",-1,"total",250);' value='-' />
    <input type='button' name='add' onclick='Total("qty",1,"total",250);' value='+' />
    <input type='text' name='qty' id='qty' readonly=true value="0" />
    <input type='text' name='total' id='total' value="0" />
  </form>
</div>

Answer 2

这是你的意思吗？

const formDiv = document.getElementById("purhcaseFormDiv");
const totalSum = document.getElementById("total");
const slider = document.querySelector(".slider-vertical");
const arr = [{name:"Rubix cube", Cost:250, image:"Pictures/3x3-Rubix-Cube.jpg"},
            {name:"Drone", Cost:5000, image:"Pictures/Rc.Drone.jpg"},
            {name:"Aeroplane", Cost:3000, image:"Pictures/Rc.Plane.jpg"},
            {name:"Cars", Cost:1500, image:"Pictures/Rc.Car.jpg"},
            {name:"Rc.Hellio", Cost:1000, image:"Pictures/Rc.Hellio.jpg"},
            {name:"Brown Teddy", Cost:800, image:"Pictures/Teddy.jpg"}];

const total = () => {
  let totalAmt = 0;
  let formHTML = []
  let amt = 0;
  arr.forEach((item, i) => {
    if (item.qty && item.qty > 0) {
      amt = item.qty * item.Cost;
      formHTML.push(item.name + "<br/>Item Price: $" + item.Cost.toFixed(2) + "<br>Please Select Quantity" +
        "<input type='button' class='subtract' value='-' data-idx='" + i + "'/>" +
        "<input type='button' class='add'      value='+' data-idx='" + i + "'/>" +
        "<input type='text' name='qty' readonly=true value='" + item.qty + "' />" +
        "<input type='text' name='subtotal' value='" + amt.toFixed(2) + "' />");
    }
    totalAmt += amt;
  });

  formDiv.innerHTML = formHTML.join("<hr/>");
  totalSum.innerText = totalAmt.toFixed(2)
};

let html = [];
arr.forEach((item, i) => html.push(
  '<div class="card"><h2>' + item.name + '</h2><img src=' + item.image + ' style="width:250px" border="3px"><p class="Cost">$ ' + item.Cost.toFixed(2) + '</p> <p> <button class="add" data-idx="' + i + '"> Add to cart </button> </p> </div>'))
slider.innerHTML = html.join("");

slider.addEventListener("click", (e) => {
  const el = e.target;
  if (el.className === "add") {
    let i = el.getAttribute("data-idx");
    if (arr[i].qty) {
      arr[i].qty++
    } else {
      arr[i].qty = 1;
    }
    total()
  }
})

formDiv.addEventListener("click", (e) => {
  let el = e.target;
  let cl = el.className;
  let i = el.getAttribute("data-idx");
  if (cl === "add" || cl === "subtract") {
    let qty = arr[i].qty;
    qty += cl === "add" ? 1 : -1;
    arr[i].qty = qty < 0 ? 0 : qty;
    total()
  }
})

<div class="slider-vertical"></div>
<hr/>
<form id="purchaseForm">
  <div id="purhcaseFormDiv"></div>
  <hr/>
  Total: $<span id="total">0.00</span>
</form>

我需要添加功能/按钮来增加产品数量的成本吗？

2 个答案: