Trying to get a shopping cart on my website work, fails completely. For some reason, the getElementsByClassName method keeps returning null even though I can clearly see that one of the objects have that class eg. if there is an object with class “price” and I set a variable to that object using getElementsByClassName, it returns undefined for some reason.
Here is the js:
var removeCartItemButtons = document.getElementsByClassName('btn-danger')
console.log(removeCartItemButtons)
for(var i = 0; i < removeCartItemButtons.length; i++)
{
var button = removeCartItemButtons[i]
button.addEventListener('click', function(event)
{
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
})
}
function updateCartTotal()
{
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
for(var i = 0; i < cartRows.length; i++)
{
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-amt')[0]
console.log(priceElement, quantityElement)
}
}
and the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/ktane-utils.js"></script>
<link rel="stylesheet" href="style.css">
<script src="cartCode.js" async></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>
<body>
<div class="container">
<div class="navbar">
<nav>
<ul>
<li><a href="index.html">"Home"</a></li>
<li><a href="products.html">"Store"</a></li>
<li><a href="cart.html">"Cart"</a></li>
<li><a href="account.html">"Account"</a></li>
</ul>
</nav>
</div>
</div>
<div class="section">
<div class="page page-bg-01">
<div class="page-header">
</div>
<div class="page-content">
<table style='width: 100%'>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<div class="cart-items">
<div class="cart-row">
<tr>
<td><span class="cart-name">Iphone 14 Max Pro, £899.99 </span><button class="btn btn-danger" type="button">Remove</button></td>
<td><input class="cart-amt" type="number" value="1"></td>
<td><span class="cart-price">£899.99</span></td>
</tr>
</div>
</div>
</table><br>
<table style='width: 50%'>
<tr>
<td>Total</td>
<td>£919.99</td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="footer">
<center><p>Email: <u>[email protected]</u></p></center>
<center><p>Facebook: <u>Tawhidul [email protected]</u></p></center>
<center><img style='width: 10%' src="img/pictures/Extra/icon.png" /></center>
<p style="text-align:left;">Copyright 2022 - Tawhid Productions</p>
</div>
</div>
</div>
</div>
</body>
</html>
I tried to see where the error was coming from, and it looked like the element didn’t allow the getElementsByClassName method in. I don’t know how to fix it, as I want to keep the table. I expected it to just give the code named “cart-price” and “cart-amt”, but it gave “undefined” and yet another “undefined”