JavaScript 函数不起作用，但我确信一切都很好

Question

The last function won't work, I don't know why. Tried changing the removeAttribute to setAttribute still won't work. Any suggestions?

        
        let mainEl = element.parentElement;
        let price = parseInt(mainEl.querySelector('p span').innerText);
        let name = mainEl.querySelector('h3').innerText;
        let vegetables = document.querySelectorAll('.single-item')
    
        AllTotal -= price;
        
        document.querySelector('.total').innerText=`Total: $${AllTotal}`;
    
        mainEl.remove();
    
        vegetables.forEach(function(vege){
            if (vege.querySelector('.si-content h3').innerText === name){
                
                vege.querySelector('.actions button').removeAttribute("disabled");
                vege.querySelector('.actions button').innerText = "Dodaj";
                vege.querySelector('.actions input').value = 0;
            };
        });
    };```

Answer 1

It does not work because in your compression if (vege.querySelector('.si-content h3').innerText === name){ it compares for example Krompir and Krompir: and since this has an extra : in the list , it cant find it.

I have changed your code and removed : when you add items to your list from this <h3>${name}:</h3> to this <h3>${name}</h3>

 let AllTotal = 0; function addToCart (elem){ let mainEl = elem.closest('.single-item'); let quantity = mainEl.querySelector('input').value; let name = mainEl.querySelector('.single-item h3').innerText; let price = mainEl.querySelector('.price').innerText; price = parseInt(price.substring(1)); if(quantity == 0){ alert('Dodajte kolicinu!'); return; } let total = price * quantity; document.querySelector('.cart-items').innerHTML += `<div class"cart-single-item"> <h3>${name}</h3> <p>${quantity} x $${price} = $<span>${total}</span></p> <button onclick="remove(this)" class="remove-item">Ukloni</button> </div>` elem.setAttribute('disabled', 'true'); elem.innerText ='Dodato' AllTotal += total; document.querySelector('.total').innerText=`Total: $${AllTotal}`; } function remove(element){ let mainEl = element.parentElement; let price = parseInt(mainEl.querySelector('p span').innerText); let name = mainEl.querySelector('h3').innerText; let vegetables = document.querySelectorAll('.single-item') AllTotal -= price; document.querySelector('.total').innerText=`Total: $${AllTotal}`; mainEl.remove(); vegetables.forEach(function(vege){ if (vege.querySelector('.si-content h3').innerText === name){ vege.querySelector('.actions button').removeAttribute('disabled'); vege.querySelector('.actions button').innerText = "Dodaj"; vege.querySelector('.actions input').value = 0; }; }); }

 <div class="container"> <div class="items"> <div class="single-item" data-type="krompir"> <div class="si-content"> <h3>Krompir</h3> <p class="price">$10</p> </div> <div class="actions"> <input type="number" name="quantity" value="0" min="0"> <button onclick="addToCart(this)">Dodaj</button> </div> </div> <div class="single-item" data-type="paradajz"> <div class="si-content"> <h3>Paradajz</h3> <p class="price">$20</p> </div> <div class="actions"> <input type="number" name="quantity" value="0" min="0"> <button onclick="addToCart(this)">Dodaj</button> </div> </div> </div> <div class="cart"> <h2>Korpa</h2> <div class="cart-items"></div> <div class="total"></div> </div> </div>

that being said this not ideal. what you should be doing is separating UI and code logic by adding a data attribute or class name to recognize the list item instead of text inside html element.