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

Creating an expandable discussion area (part II)

Exploring the process of assigning responses to questions within my software program

Comparison between SSD and HDD animation speed in web hosting environments

Is Moment.js displaying time incorrectly?

What steps can I take to ensure that this input is neat and tidy

Adding Bootstrap component via ajax request

Achieving success was like uncovering a hidden treasure chest after a successful

It seems that BeautifulSoup and Selenium are unable to locate the div or text elements on the website

Add items to a fresh record using Mongoose and Express

What is the difference between TypeScript's import/as and import/require syntax?

Transitioning the style code from inline to the head of the document disrupts the straightforward JavaScript intended to

Adjust the size of the div menu according to the window's dimensions

What is the best method for extracting a particular value from my dataset?

Timeout for jQuery animations

Issue with retrieving body class in Internet Explorer on Magento platform. The body class is not being recognized in IE, but works fine in Mozilla and Chrome

What is the best way to combine the elements within an array with the elements outside of the array in order to calculate their sum?

Experience the dynamic synergy of React and typescript combined, harnessing

I have always wondered about the meaning of " + i + " in Javascript. Can you explain it to

What would be the ideal alternative if the Google Ajax API is unavailable, given that Google does not allow for local installation?

Tips for applying a custom design to your MUI V5 styled component