i have a problem with the first qantity change but the second dosnt do anything
if (document.readyState == `loading`)
{document.addEventListener(`DOMContentLoaded`,ready);}
else{ready}
function ready(){const removebutton = document.querySelectorAll(`.remove-pr`);
console.log(removebutton);
for( let i=0 ; i < removebutton.length; i++){
const button = removebutton[i]
button.addEventListener(`click`,function(event){
var buttonclicked= event.target
buttonclicked.parentElement.parentElement.parentElement.remove()
updatecarttotal()})}
var addtocartbuttons=document.getElementsByClassName(`cart`)
for( let i=0 ; i < addtocartbuttons.length; i++){
var button = addtocartbuttons[i]
button.addEventListener(`click`,addtocartclicked)
}
var value = document.getElementsByClassName(`c-input-text qty text`)
for( let i=0 ; i < value.length; i++){
var input = value[i]
input.addEventListener(`change`, quantityChanged)
console.log(value);
}
function quantityChanged(event){
var input = event.target
if(isNaN(input.value) || input.value <=0 ){
input.value = 1
}
updatecarttotal()
}
function addtocartclicked(event){
var button =event.target
var shopitem = button.parentElement.parentElement.parentElement
var title = shopitem.getElementsByClassName(`why-text`)[0].innerText
var imgsrc= shopitem.getElementsByClassName(`img-fluid`)[0].src
console.log(title,imgsrc)
additemtocart(title,imgsrc)
}
function additemtocart(title,imgsrc){
var cartrow = document.createElement(`div`)
cartrow.classList.add(`cart-list`)
var cartitems = document.getElementsByClassName(`side`)[0]
var cartrowcontents =` <a href="#" class="photo"><img src="images/img-pro-01.jpg" class="cart-thumb" alt="" /></a>
<h6><a href="#">Delica omtantur </a></h6>
<p>1x - <span class="price">$80.00</span></p>`
cartrow.innerHTML = cartrowcontents
cartitems.append(cartrow)
}
function updatecarttotal() {
var cartitemcontainer = document.getElementsByClassName(`table`)[0]
var removebutton = document.querySelectorAll(`.cart-items`)
var total =0
for( let i= 0 ; i < removebutton.length; i++){
var removebutton = removebutton[i]
var priceelement = removebutton.getElementsByClassName(`price-pr`)[i]
var quantitylement = removebutton.getElementsByClassName(`c-input-text qty text`)[i]
var price =parseFloat(priceelement.innerText.replace(`$`,``))
var quantity = quantitylement.value
total = total + (price*quantity)
document.getElementsByClassName("d-flex-gr-total")[i].innerText=`$`+total;
document.getElementsByClassName("total-pr")[i].innerText=`$`+total;
console.log(quantitylement) }
}
}
html
<td class="quantity-box"><input type="number" size="4" value="1" min="0" step="1" class="c-input-text qty text"></td>
<td class=" total-pr">
<p>$ 80.0</p>
</td>