Not editing price after delete in cart + multiplying the added price of product

JavaScript
1

I need a help of my problem. Im trying to do a main page of e-shop now. I have the problem, when when a user add a product to cart, the price of that product is multiplying *2 in contrast of wroten price. And when a user want to delete added product, the final price wouldnt been changed and in console is written "Uncaught TypeError: Cannot read property ‘innerText’ of undefined at updateCelkoveCeny (Eshop.js:86) at HTMLButtonElement.odstranitProduktyVKosiku (Eshop.js:30). Anny Suggestions?
PS: Sorry for copying everything in my code, but i really dont know where the problem is. :confused:

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Eshop - Hlavní stránka</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="styl.css">
	<script src="Eshop.js" async></script>
</head>
<body>
	<header>
		<div id="logo"><h1>Destralux</h1></div>
			<nav>
				<ul>
					<li><a href="index.html">Domů</a></li>
					<li><a href="Rozvrh.html">Rozvrh</a></li>
					<li class="aktivni"><a href="#">E-shop</a></li>
				</ul>
			</nav>
			</header>
			<article>
					<div id="centrovac">
						<header>
								<h1>Sparťanské samolepky</h1><hr><br>
								<div class="kosik">
									<div>
										<h1>Košík</h1>
										<hr>
            							<div class="kosik-produkty">
                							<div class="kosik-radek">
                    							<div class="kosik-produktu kosik-sloupec">
                        							<img class="kosik-fotka-produktu" src="Produkty/Samolepka_1.jpg" width="100" height="100"><br>
                        							<span class="kosik-nazev-produktu">"18 93"</span>
                    							</div>
                    							<span class="kosik-cena kosik-sloupec">10,-</span>
                    							<div class="kosik-pocet kosik-sloupec">
                        							<input class="kosik-pocet-input" type="number" value="2" min="1">
                        							<button class="button-remove" type="button">Odstranit</button>
                    							</div>
                							</div><br><br>
                							<div class="kosik-radek">
                    							<div class="kosik-produktu kosik-sloupec">
                        							<img class="kosik-fotka-produktu" src="Produkty/Set_1.jpg" width="100" height="100"><br>
                        							<span class="kosik-nazev-produktu">Set Samolepek</span>
                    							</div>
                    							<span class="kosik-cena kosik-sloupec">95,-</span>
                    							<div class="kosik-pocet kosik-sloupec">
                    								<input class="kosik-pocet-input" type="number" value="1" min="1">
                        							<button class="button-remove" type="button">Odstranit</button>
                    							</div>
                							</div>
            							</div><hr>
            							<div class="cart-total">
                							<strong class="kosik-celkem-nadpis">Celkem:</strong>
                							<span class="kosik-celkem-cena">115,-</span><hr>
            							</div>
            							<button class="button-prejit-k-vyberu-doruceni" type="button">Přejít k výběru doručení</button>
									</div>
						</header>

						<section>
            				<div class="eshop-produkty">
                				<div class="eshop-produkt">
                    				<span class="eshop-nazev-produktu"><p><strong>"18 93"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_1.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">10,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div>
                    			<div class="eshop-produkt" id="dalsi-v-rade">
                    				<span class="eshop-nazev-produktu"><p><strong>"Letenští"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_2.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">10,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div><br>
                    			<hr>
                    			<div class="eshop-produkt">
                    				<span class="eshop-nazev-produktu"><p><strong>"ACS"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_3.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">10,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div>
                    			<div class="eshop-produkt" id="dalsi-v-rade">
                    				<span class="eshop-nazev-produktu"><p><strong>"Sparta 18|93 Praha"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_4.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">12,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div><br>
                    			<hr>
                    			<div class="eshop-produkt">
                    				<span class="eshop-nazev-produktu"><p><strong>"Come on Sparta"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_5.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">12,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div>
                    			<div class="eshop-produkt" id="dalsi-v-rade">
                    				<span class="eshop-nazev-produktu"><p><strong>"Sparta 1893 Praha"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_6.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">12,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div><br>
                    			<hr>
                    			<div class="eshop-produkt">
                    				<span class="eshop-nazev-produktu"><p><strong>"Letenští Chuligáni"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_7.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">15,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div>
                    			<div class="eshop-produkt" id="dalsi-v-rade">
                    				<span class="eshop-nazev-produktu"><p><strong>"ACS Ultras"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_8.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">15,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div><br>
                    			<hr>
                    			<div class="eshop-produkt">
                    				<span class="eshop-nazev-produktu"><p><strong>"I když budu prach a dým"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_9.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">15,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div>
                    			<div class="eshop-produkt" id="dalsi-v-rade">
                    				<span class="eshop-nazev-produktu"><p><strong>"Vaše noční můra"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_10.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">15,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div><br>
                    			<hr>
                    			<div class="eshop-produkt">
                    				<span class="eshop-nazev-produktu"><p><strong>"18|93"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_11.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">15,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div>
                    			<div class="eshop-produkt" id="dalsi-v-rade">
                    				<span class="eshop-nazev-produktu"><p><strong>"Jedno město, jeden klub"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_12.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">15,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div><br>
                    			<hr>
                    			<div class="eshop-produkt">
                    				<span class="eshop-nazev-produktu"><p><strong>"1893 Sparta Praha"</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Samolepka_13.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">15,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div>
                    			<div class="eshop-produkt" id="dalsi-v-rade">
                    				<span class="eshop-nazev-produktu"><p><strong>Set Samolepek</strong></p></span>
                    					<img class="eshop-fotka-produktu" src="Produkty/Set_1.jpg" height='250px' width='280px'>
                    					<div class="eshop-detaily-produktu">
                        					<span class="eshop-cena-produktu">95,-</span>
                        					<button class="button-pridat-produkt-do-kosiku" type="button">Přidat do košíku</button>
                        				</div>
                    			</div><br>
                			</div>
        				</section>
						<div class="cistic"></div>
					</div>
				</article>

				<footer>
								<p>Copyright &copy; 2019-2020 - Všechna práva vyhrazena - Destralux 
				</footer>
</body>
</html>

Javascript:

if (document.readyState == 'loading') {
	document.addEventListener('DOMContentLoaded', ready)
} else {
	ready()
}

function ready() {
	var odstranitProduktButtons = document.getElementsByClassName("button-remove");
	for (var i = 0; i < odstranitProduktButtons.length; i++) {
		var button = odstranitProduktButtons[i]
		button.addEventListener('click', odstranitProduktyVKosiku)
	}

	var	pocetInputu = document.getElementsByClassName('kosik-pocet-input')
	for (var i = 0; i < pocetInputu.length; i++) {
		var input = pocetInputu[i]
		input.addEventListener('change', pocetZmenen)
	}

	var tlacitkaProPridaniProduktu = document.getElementsByClassName('button-pridat-produkt-do-kosiku')
	for (var i = 0; i < tlacitkaProPridaniProduktu.length; i++) {
		var button = tlacitkaProPridaniProduktu[i]
		button.addEventListener('click', pridejPoKliknutiDoKosiku)
	}
}

function odstranitProduktyVKosiku(event) {
		var buttonClicked = event.target
		buttonClicked.parentElement.parentElement.remove()
		updateCelkoveCeny()
}

function pocetZmenen(event) {
	var input = event.target
	if (isNaN(input.value) || input.value <= 0) {
		input.value	= 1
	}
	updateCelkoveCeny();
}

function pridejPoKliknutiDoKosiku(event) {
	var	button = event.target
	var produkt = button.parentElement.parentElement
	var nazevProduktu = produkt.getElementsByClassName('eshop-nazev-produktu')[0].innerText
	var cena = produkt.getElementsByClassName('eshop-cena-produktu')[0].innerText
	var zdrojObrazku = produkt.getElementsByClassName('eshop-fotka-produktu')[0].src
	pridejProduktDoKosiku(nazevProduktu, cena, zdrojObrazku)
	updateCelkoveCeny()
}
function pridejProduktDoKosiku(nazevProduktu, cena, zdrojObrazku) {
	var radekKosik = document.createElement('div')
	radekKosik.classList.add('kosik-radek')
	var kosikProdukty = document.getElementsByClassName('kosik-produkty')[0]
	var NazvyProduktu = kosikProdukty.getElementsByClassName('kosik-nazev-produktu')
	for (var i = 0; i < NazvyProduktu.length; i++) {
		if (NazvyProduktu[i].innerText == nazevProduktu) {
			alert("Tento produkt je již obsažen v košíku.")
			return
		}
	}
	var radekKosikKontent = `
		<div class="kosik-radek">
            <div class="kosik-produktu kosik-sloupec">
                <img class="kosik-fotka-produktu" src="${zdrojObrazku}" width="100" height="100"><br>
                <span class="kosik-nazev-produktu">${nazevProduktu}</span>
            </div>
            <span class="kosik-cena kosik-sloupec">${cena}</span>
            <div class="kosik-pocet kosik-sloupec">
                <input class="kosik-pocet-input" type="number" value="1" min="1">
                <button class="button-remove" type="button">Odstranit</button>
            </div>
        </div><br><br>`
   	radekKosik.innerHTML = radekKosikKontent
	kosikProdukty.append(radekKosik)
	radekKosik.getElementsByClassName("button-remove")[0].addEventListener('click', odstranitProduktyVKosiku)
	radekKosik.getElementsByClassName('kosik-pocet-input')[0].addEventListener('change', pocetZmenen)
}

function updateCelkoveCeny() {
    var produktyKosikContainer = document.getElementsByClassName('kosik-produkty')[0]
    var radkyKosik = produktyKosikContainer.getElementsByClassName('kosik-radek')
    var celkovaCena = 0
    for (var i = 0; i < radkyKosik.length; i++) {
        var radekKosik = radkyKosik[i]
        var cenaElement = radekKosik.getElementsByClassName('kosik-cena')[0]
        var pocetElement = radekKosik.getElementsByClassName('kosik-pocet-input')[0]
        var cena = parseFloat(cenaElement.innerText.replace(',-', ''))
        var pocet = pocetElement.value
        celkovaCena = celkovaCena + (cena * pocet)
    }
    document.getElementsByClassName('kosik-celkem-cena')[0].innerText = celkovaCena + ",-"
}
2

Just one observation.

When the page first loads you have two products at the top, under the heading of Košík

They are wrapped in a class of ‘kosik-produkty’
The product items are wrapped in a class of ‘kosik-radek’

like so

<div class="kosik-produkty">
	<div class="kosik-radek">
		
		product here
		
	</div><br><br>
	<div class="kosik-radek">
		
		product here
		
	</div>
</div>

These products can be removed without an error

When you then add a product you end up with duplicate kosik-radek classes like so

<div class="kosik-produkty">
    <br><br>
    <div class="kosik-radek">
        <div class="kosik-radek"> <-- duplicate kosik-radek div inside -->

            product here

        </div><br><br>
    </div>
</div>

This will then throw the type error when you try to remove

The Czech is a bit of a barrier for me, but inside the function updateCelkoveCeny

var radkyKosik = produktyKosikContainer.getElementsByClassName('kosik-radek')

is picking up those duplicates

put a console.log(radkyKosik) after that line to see.

Sorry I can’t be more help right now, but hopefully it is a pointer.

1 Like
3

Yeah, thats a problem. Thank you for your help!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.