Not getting any returns in the Console-CodePudding

I am logging to console the priceElement and quantityElement but not getting any returns in the console.

I am not getting any returns from the priceElement and quantityElement in the console, I was expecting to get 799.99 from the priceElement and the value of 1 in the quantityElement. Please help how can I fix this

Snippet

// The javascript

var removecartitembuttons = document.getElementsByClassName('btn-warning')
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('checkout-input')[0]
    console.log(priceElement, quantityElement)
  }
}

<div >
  <div >
    <div >
      <img  src="Images/Cpu.jpg" width="100" height="100">
      <span >CPU</span>
    </div>
    <span >$799.99</span>
    <div >
      <input  type="number" value="1">
      <button  role="button">REMOVE</button>
    </div>
  </div>
  <div >
    <strong >SUM</strong>
    <span >$800</span>
  </div>
  <button  role="button">Check Out</button>
</div>

CodePudding user response：

Call your function before removing elements from button click.

Since you are calling the function after removing the elements, you are not getting anything in your console because everything get removed after button click.

var removecartitembuttons = document.getElementsByClassName('btn-warning')
console.log(removecartitembuttons)
for (var i = 0; i < removecartitembuttons.length; i  ) {
  var button = removecartitembuttons[i]
  button.addEventListener('click', function(event) {
    var buttonClicked = event.target
    UpdateCartTotal() //Call this function here!! before removing your elements from where you need to get data
    buttonClicked.parentElement.parentElement.remove()
    
  })
}