The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

Question

The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

I am currently working on an e-commerce website with a shopping cart feature. The cart displays the number of items added to it, which increases by one when 'Add to Cart' is clicked and decreases by one when 'Remove' is clicked. However, I have encountered a bug where each 'Remove' button subtracts different amounts from the total number, rather than just one as intended.

CODE:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Commerce Website</title>

    <link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    <link rel="stylesheet" href="style.css">
    <script src="app.js" async></script>
</head>
<body>
    (...)
</body>
</html>

CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
(All CSS styling properties and classes)

JAVSCRIPT:

let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
(...)

javascript html css

Answer 1

Answer №1

I see a mistake in the way you've set up your code for removing items - there's no need to call a separate function when you can simply loop through the items directly. The issue here lies in trying to perform mathematical operations on string data, such as with the innerText. To resolve this, just add a + in front of it to convert the value to a number.

for (i = 0; i < removebtn.length; i++) {
    let rbutton = removebtn[i];
    rbutton.addEventListener("click", function() {
        let TotalNumbervalue = +TotalNumber.innerText.trim()
        if (TotalNumbervalue > 0) {
            TotalNumber.innerText--
        }
        rbutton.parentElement.parentElement.remove()
    })
}

Answer 2

I see a mistake in the way you've set up your code for removing items - there's no need to call a separate function when you can simply loop through the items directly. The issue here lies in trying to perform mathematical operations on string data, such as with the innerText. To resolve this, just add a + in front of it to convert the value to a number.

for (i = 0; i < removebtn.length; i++) {
    let rbutton = removebtn[i];
    rbutton.addEventListener("click", function() {
        let TotalNumbervalue = +TotalNumber.innerText.trim()
        if (TotalNumbervalue > 0) {
            TotalNumber.innerText--
        }
        rbutton.parentElement.parentElement.remove()
    })
}

Answer 3

Answer №2

removeItem() function iterates over all remove button elements and attaches a click event listener that removes the parent element. Repeatedly calling this function when adding a new item can result in multiple click listeners accumulating, causing them to erroneously remove one instance at a time.

To prevent this issue, it's recommended to add the click event listener after appending the element, ensuring that only one click listener is active at any given moment.

let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
const cartbody = document.querySelector('.cartbody')
const removebtn = document.getElementsByClassName('removebtn')
const carttotal = document.querySelector('.carttotal')

cartbtn.addEventListener('click', function() {
    cartbody.classList.toggle('cartbodyactive')
})

closeicon.addEventListener('click', function() {
    cartbody.classList.remove('cartbodyactive')
})


function InputToDefault() {

    let qinput = document.getElementsByClassName('qinput')
    for (let i = 0; i < qinput.length; i++) {
        qinput[i].value = 1;
    }
}

InputToDefault()

function AddItemtoCart() {
    for (i = 0; i < Atc.length; i++) {

        let button = Atc[i];
        button.addEventListener("click", function() {
            let TotalNumbervalue = TotalNumber.innerHTML
            if (TotalNumbervalue > -1) {

                TotalNumber.innerHTML++
            }


            let price = document.getElementById('actualprice')
            let pricenum = price.innerText
            console.log(pricenum)




            let shopitem = button.parentElement
            let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
            let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
            let cartrow = document.createElement('div')
            let cartitems = document.getElementsByClassName('cartitems')[0]
            let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`
            cartrow.innerHTML = cartrowcontent;
            cartitems.append(cartrow)
            cartitems.lastChild.querySelector('.removebtn').addEventListener("click", function() {
                let TotalNumbervalue = +TotalNumber.innerText;
                console.log(TotalNumbervalue);
                if (TotalNumbervalue > 0) {
                    TotalNumber.innerText--
                }
                this.parentElement.parentElement

              </div>remove()
            })

            qinput.value = 1
            InputToDefault()
        })
    }
}


AddItemtoCart()

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  display: none;
}

.wrapper {
  overflow-x: hidden;
}

.topnavcont {
  padding: 1em 0em;
  align-items: center;
  height: 10vh;
  width: 100vw;
  display: flex;
  justify-content: space-around;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
  position: fixed;
  z-index: 5;
}

.topleftnav {
  display: flex;
  justify-content: space-between;
  width: 10%;
  margin-left: -3%;
  font-weight: bold;
}

.topleftnav li {
  cursor: pointer;
  list-style: none;
  font-size: 1.05rem;
  transition: 0.3s ease;
  border-bottom: transparent solid 2px;
}

.topleftnav li:hover {
  border-bottom: black solid 2px;
  transform: scale(1.1);
}

.topnavtitle {
  margin-right: 2.5%;
}

.navcartcontainer {
  display: flex;
  margin-right: -1%;
}

.topnavcont .totalnumber {
  color: black;
  padding: 0.2em 0.4em;
  border-radius: 50%;
  font-size: 1.25rem;
  height: fit-content;
  /* cursor: pointer; */
  font-weight: bold;
}

.topnavcont i {
  font-size: 2rem;
  margin-left: 0.3em;
  cursor: pointer;
  transition: 0.4s ease;
}

.topnavcont i:hover {
  transform: scale(1.15);
}
...
And so on...

<!DOCTYPE html>
<html lang="en">

...rest of the content remains unchanged...

</body>

</html>

Answer 4

removeItem() function iterates over all remove button elements and attaches a click event listener that removes the parent element. Repeatedly calling this function when adding a new item can result in multiple click listeners accumulating, causing them to erroneously remove one instance at a time.

To prevent this issue, it's recommended to add the click event listener after appending the element, ensuring that only one click listener is active at any given moment.

let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
const cartbody = document.querySelector('.cartbody')
const removebtn = document.getElementsByClassName('removebtn')
const carttotal = document.querySelector('.carttotal')

cartbtn.addEventListener('click', function() {
    cartbody.classList.toggle('cartbodyactive')
})

closeicon.addEventListener('click', function() {
    cartbody.classList.remove('cartbodyactive')
})


function InputToDefault() {

    let qinput = document.getElementsByClassName('qinput')
    for (let i = 0; i < qinput.length; i++) {
        qinput[i].value = 1;
    }
}

InputToDefault()

function AddItemtoCart() {
    for (i = 0; i < Atc.length; i++) {

        let button = Atc[i];
        button.addEventListener("click", function() {
            let TotalNumbervalue = TotalNumber.innerHTML
            if (TotalNumbervalue > -1) {

                TotalNumber.innerHTML++
            }


            let price = document.getElementById('actualprice')
            let pricenum = price.innerText
            console.log(pricenum)




            let shopitem = button.parentElement
            let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
            let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
            let cartrow = document.createElement('div')
            let cartitems = document.getElementsByClassName('cartitems')[0]
            let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`
            cartrow.innerHTML = cartrowcontent;
            cartitems.append(cartrow)
            cartitems.lastChild.querySelector('.removebtn').addEventListener("click", function() {
                let TotalNumbervalue = +TotalNumber.innerText;
                console.log(TotalNumbervalue);
                if (TotalNumbervalue > 0) {
                    TotalNumber.innerText--
                }
                this.parentElement.parentElement

              </div>remove()
            })

            qinput.value = 1
            InputToDefault()
        })
    }
}


AddItemtoCart()

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  display: none;
}

.wrapper {
  overflow-x: hidden;
}

.topnavcont {
  padding: 1em 0em;
  align-items: center;
  height: 10vh;
  width: 100vw;
  display: flex;
  justify-content: space-around;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
  position: fixed;
  z-index: 5;
}

.topleftnav {
  display: flex;
  justify-content: space-between;
  width: 10%;
  margin-left: -3%;
  font-weight: bold;
}

.topleftnav li {
  cursor: pointer;
  list-style: none;
  font-size: 1.05rem;
  transition: 0.3s ease;
  border-bottom: transparent solid 2px;
}

.topleftnav li:hover {
  border-bottom: black solid 2px;
  transform: scale(1.1);
}

.topnavtitle {
  margin-right: 2.5%;
}

.navcartcontainer {
  display: flex;
  margin-right: -1%;
}

.topnavcont .totalnumber {
  color: black;
  padding: 0.2em 0.4em;
  border-radius: 50%;
  font-size: 1.25rem;
  height: fit-content;
  /* cursor: pointer; */
  font-weight: bold;
}

.topnavcont i {
  font-size: 2rem;
  margin-left: 0.3em;
  cursor: pointer;
  transition: 0.4s ease;
}

.topnavcont i:hover {
  transform: scale(1.15);
}
...
And so on...

<!DOCTYPE html>
<html lang="en">

...rest of the content remains unchanged...

</body>

</html>

The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

Answer №1

Answer №2

Similar questions

Challenges with Dual Y-Axis in a Horizontal Stacked Bar Graph

Initiate the month transition event within the fomantic calendar

"Utilizing social links in web design for a seamless user experience

splitting xmlhttp.responsetext using loops

Can someone show me how to verify in PHP (using codeigniter) if the following two rows contain any data?

Angular Bootstrap UI - Ensuring only one element collapses at a time

Expanding the size of an array list item in React

Difficulty with Vue.js updating chart JS label names

How to perfectly align content on a webpage

Trigger an input file click automatically using vanilla JavaScript with an AJAX request in Google Chrome

Error encountered when attempting to establish a connection between socket.io and express: network error

Raycast in Three.js is struggling to locate object

Content Security Policy in Firefox Extension blocking local DataTables js

Step by step guide on incorporating two background images in a single header

Prevent floating labels from reverting to their initial position

Broken styles when using Material UI with babel and the 'with styles' feature

Tips for concealing the bar graph while maintaining the visibility of the data labels in HighCharts

Troubleshoot my code for clustering markers on a Google map

Issue "cannot update headers after they have been sent"

Event handler for the MouseLeave event is not successfully triggering when dealing with anchor