为什么我的代码不工作javascript,Html,CSS?

jhiyze9q  于 2023-02-10  发布在  Java
关注(0)|答案(1)|浏览(133)

我在开发一个网站(仅前端)和我有问题的购物车。我新的编码,所以我遵循了几个不同的教程,以实现一个功能齐全的购物车。然而,我的代码不工作。原来的代码允许我增加和减少购物车中的项目数量,它也相应地改变了价格。然而,它不让我从购物车中删除项目,因此使用另一个教程我添加了下一位代码,允许我从购物车中删除项目,它的工作原理就像我可以从购物车中删除项目,但现在我不能增加/减少数量,所以我的旧代码现在不工作。

`var removecartitemsbutton = document.getElementsByClassName('product-close-btn')
console.log (removecartitemsbutton)
for (var i = 0; i <removecartitemsbutton.length; i ++){
    var button = removecartitemsbutton[i]
    button.addEventListener('click', function(event){var buttonclicked = event.target
    buttonclicked.parentElement.parentElement.remove()
    updatecarttotal()})
}

function updatecarttotal() {
    var cartitemcontainer = document.getElementsByClassName('product-card')[0]
     var cartrows = cartitemcontainer.getElementsByClassName('card')
}   for (var i = 0; i < cartrows.length; i ++){
        var cartrow = cartrows[i]
        var priceElement = cartrow.getElementsByClassName('price')[0]
        var quantityElement = cartrow.getElementsByClassName('product-qty')[0]
        console.log(priceElement, quantityElement)
}`

此代码允许我删除项目^^^^^^^^^^^^^^^
下面的代码是原始代码,让我增加/减少项目,并相应地改变价格

`'use strict';

 const totalElem = document.querySelector('#total');
  
  
  // loop: for add event on multiple `increment` & `decrement` button
  for (let i = 0; i < incrementBtn.length; i++) {
  
    incrementBtn[i].addEventListener('click', function () {
  
      // collect the value of `quantity` textContent,
      // based on clicked `increment` button sibling.
      let increment = Number(this.previousElementSibling.textContent);
  
      // plus `increment` variable value by 1
      increment++;
  
      // show the `increment` variable value on `quantity` element
      // based on clicked `increment` button sibling.
      this.previousElementSibling.textContent = increment;
  
      totalCalc();
  
    });
  
  
    decrementBtn[i].addEventListener('click', function () {
  
      // collect the value of `quantity` textContent,
      // based on clicked `decrement` button sibling.
      let decrement = Number(this.nextElementSibling.textContent);
  
      // minus `decrement` variable value by 1 based on condition
      decrement <= 1 ? 1 : decrement--;
  
      // show the `decrement` variable value on `quantity` element
      // based on clicked `decrement` button sibling.
      this.nextElementSibling.textContent = decrement;
  
      totalCalc();
  
    });
  
  }
  
  
  
  // function: for calculating total amount of product price
  const totalCalc = function () {
  
    // declare all initial variable
    const tax = 0.05;
    let subtotal = 0;
    let totalTax = 0;
    let total = 0;
  
    // loop: for calculating `subtotal` value from every single product
    for (let i = 0; i < quantityElem.length; i++) {
  
      subtotal += Number(quantityElem[i].textContent) * Number(priceElem[i].textContent);
  
    }
  
    // show the `subtotal` variable value on `subtotalElem` element
    subtotalElem.textContent = subtotal.toFixed(2);
  
    // calculating the `totalTax`
    totalTax = subtotal * tax;
  
    // show the `totalTax` on `taxElem` element
    taxElem.textContent = totalTax.toFixed(2);
  
    // calcualting the `total`
    total = subtotal + totalTax;
  
    // show the `total` variable value on `totalElem` & `payAmountBtn` element
    totalElem.textContent = total.toFixed(2);
    payAmountBtn.textContent = total.toFixed(2);
  `

我试图使共存和工作在一起作为两个部分是必要的为一个购物车(删除项目和增加/减少项目).我试图改变函数的名字所以他们都是相同的.然而我还没有任何运气.

11dmarpk

11dmarpk1#

在这个JavaScript函数中,计算产品价格的总金额。看起来像是根据产品的数量和价格计算小计、税金和总额。
代码使用“querySelector”方法选择ID为“#total”的元素,并将其存储在“totalElem”常量中。然后,代码使用“for循环”将“click事件”的事件侦听器添加到多个“递增”和“递减”按钮。增量和减量按钮用于更改产品的数量,每当数量更改时,代码都会更新小计、税总值

totalCalc函数计算**小计、税和总计,**并用新值更新页面上的相应元素。

代码中似乎缺少一些元素和常量,如“incrementBtn"、“decrementBtn"、“quantityElem"、“priceElem"、“subtotalElem"、“taxElem"和“payAmountBtn"。要使代码正常工作,您需要在HTML和JavaScript文件中定义这些元素和常量。

相关问题