Блог

Главная - Вопросы по программированию - Как заставить прослушиватели событий работать для добавленных элементов?

Как заставить прослушиватели событий работать для добавленных элементов?

#javascript #html #css

Вопрос:

Я настроил корзину покупок и пытаюсь заставить товары добавлять и удалять товары. Элементы, которые я добавил в прослушиватели событий, не работают. В моем Javascipt у меня есть анимация скольжения, когда вы нажимаете кнопку «Корзина». Затем у меня есть цикл for для того, чтобы все поля ввода были помечены как одно целое. Затем у меня есть две функции, которые являются «addtocart» и «remove», и они объясняют сами себя

HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Commerce Website</title>

    <link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>

    <link rel="stylesheet" href="style.css">
    <script src="app.js"async></script>
</head>
<body>
    <div class="wrapper">
        <div class="p1">
            <div class="topnavcont">
                <ul class="topleftnav">
                <li class="topnavlink">Home</li>
                <li class="topnavlink">Shop</li>
            </ul>
            <h1 class="topnavtitle">The Store</h1>
            <div class="navcartcontainer">
                <h3 class="totalnumber">3</h3>
                <i class="fas fa-shopping-cart" id="cartbtn"></i>
            </div>
            </div>

            <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg">
            <div class="overlay"></div>
            <div class="cartbody">
                <i class="fal fa-times" id="closeicon"></i>
                <h2 class="carttitle">Shopping Cart</h2>
                <ul class="cartitems">
                    <li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li>
                    <li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li>
                    <li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number" class="qinput" id="qinput"><button class="removebtn">Remove</button></li>
                </ul>
                <div class="carttotal">Total: $64.66</div>
                
            </div>
        </div>

<div class="p2">
    <h1 class="p2title">My Shop</h1>
    <div class="itemcontainer">
<div class="item">
    <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
    <h1 class="item-title">Shirt1</h1>
    <h3 class="itemprice">$8.99</h3>
    <!-- <a href="#" class="atcbtn">Add To Cart</a> -->
    <button class="atcbtn">Add To Cart</button>
</div>

<div class="item">
    <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
    <h1 class="item-title">Shirt2</h1>
    <h3 class="itemprice">$8.99</h3>
    <!-- <a href="#" class="atcbtn">Add To Cart</a> -->
    <button class="atcbtn">Add To Cart</button>
</div>

<div class="item">
    <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
    <h1 class="item-title">Shirt3</h1>
    <h3 class="itemprice">$8.99</h3>
    <!-- <a href="#" class="atcbtn">Add To Cart</a> -->
    <button class="atcbtn">Add To Cart</button>
</div>

</div>
    <div class="itemcontainer2">
<div class="item">
    <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
    <h1 class="item-title">Shirt4</h1>
    <h3 class="itemprice">$8.99</h3>
    <!-- <a href="#" class="atcbtn">Add To Cart</a> -->
    <button class="atcbtn">Add To Cart</button>
</div>

<div class="item">
    <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
    <h1 class="item-title">Shirt5</h1>
    <h3 class="itemprice">$8.99</h3>
    <!-- <a href="#" class="atcbtn">Add To Cart</a> -->
    <button class="atcbtn">Add To Cart</button>
</div>

<div class="item">
    <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
    <h1 class="item-title">Shirt6</h1>
    <h3 class="itemprice">$8.99</h3>
    <!-- <a href="#" class="atcbtn">Add To Cart</a> -->
    <button class="atcbtn">Add To Cart</button>
</div>

</div>

</div>


    </div>
  
</body>
</html>

CSS:

 *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
::-webkit-scrollbar{
    display: none;
}
.wrapper{
    overflow-x: hidden;
}
.topnavcont{
    padding: 1em 0em;
    align-items: center;
    height: 10vh;
    width: 100vw;
    display: flex;
    justify-content: space-around;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
    position: fixed;
    z-index: 5;
}


.topleftnav{
    display: flex;
    justify-content: space-between;
    width: 10%;
    margin-left: -3%;
    font-weight: bold;
}
.topleftnav li{
    cursor: pointer;
    list-style: none;
    font-size: 1.05rem;
    transition: 0.3s ease;
    border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
    border-bottom: black solid 2px;
    transform: scale(1.1);
}
.topnavtitle{
    margin-right: 2.5%;
}
.navcartcontainer{
    display: flex;
    margin-right: -1%;
    
}
.topnavcont .totalnumber{
    color: black;
    padding: 0.2em 0.4em;
    border-radius: 50%;
    font-size: 1.25rem;
    height: fit-content;
    /* cursor: pointer; */
    font-weight: bold;
}

.topnavcont i{
    font-size: 2rem; 
    margin-left: 0.3em;
    cursor: pointer;
    transition: 0.4s ease;
    
}
.topnavcont i:hover{
    transform: scale(1.15);
}
.p1{
    height: 100vh;
    position: relative;
}
.p1 img{
    object-fit: cover;
    height: 100vh;
    width: 100%;
}
.p1 .overlay::after{
    content: "";
    position: absolute;
    top: 10vh;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    opacity: 0.4;
    height: 90vh;
    width: 100%;
}
.cartbody{
    background-color: white;
    position: fixed;
    height: 100vh;
    width: 25vw;
    top: 10%;
    left: 75%;
    z-index: 2100;
    overflow-y: auto;
    transform: translateX(100%);
    transition: 0.7s ease;
    box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;

}
.carttotal{
    font-size: 2rem;
    color: rgb(22, 113, 119);
    font-weight: bold;
    margin-top: 1.5em;
    text-align: center;
    margin-bottom: 3em;
}
.cartbody i{
    font-size: 2.2rem;
    margin-left: 0.4em;
    margin-top: 0.2em;
    color: black;
    font-weight: 200;
    cursor: pointer;
    transition: 0.3s ease;
}
.cartbody i:hover{
    transform: scale(1.15);
}
.cartbody input{
    width: 2.2rem;
    height: auto;
}
.cartbodyactive{
    transform: translateX(0%);
}
.carttitle{
    text-align: center;
    margin-top: 1em;
    margin-bottom: 2em;
}
.cartitem{
    display: flex;
    justify-content: space-evenly;
}
.cartitem .itemtitle{
    font-size: 1.2rem;
}
.cartitems{
    display: flex;
    flex-direction: column;
    row-gap: 3em;
    overflow-y: auto;
    list-style: none;
    padding-left: 0.5em;
}
.removebtn{
    background-color: red;
    color: black;
    font-weight: bold;
    outline: none;
    border: none;
    padding: 0.5em 1em;
    cursor: pointer;
}
.p2{
    height: 160vh;
    position: relative;
}
.p2title{
    color: black;
    padding-top: 2.5em;
    margin-left: 7%;
}
.p2 img{
    height: 200px;
    width: 300px;
}
.itemcontainer{
    margin-top: 6em;
    display: flex;
    justify-content: space-around;
}
.itemcontainer2{
    margin-top: 6em;
    display: flex;
    justify-content: space-around;
}
.item{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 355px;
    justify-content: space-around;
}

.atcbtn{
    background-color: white;
    cursor: pointer;
    text-decoration: none;
    color: black;
    width: 40%;
    text-align: center;
    font-weight: bold;
    border: black solid 2px;
    padding: 0.8em 0.5em;
    transition: 0.4s ease;
}
.atcbtn:hover{
    background-color: black;
    color: white;
    font-weight: bold;
}

язык JavaScript:

 let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
const cartbody = document.querySelector('.cartbody')
const removebtn = document.getElementsByClassName('removebtn')
const carttotal = document.querySelector('.carttotal')
let   qinput = document.getElementsByClassName('qinput')

cartbtn.addEventListener('click', function(){
    cartbody.classList.toggle('cartbodyactive')
})

closeicon.addEventListener('click', function(){
    cartbody.classList.remove('cartbodyactive')
})



for(let i = 0; i < qinput.length; i  ){
    qinput[i].value= 1;
}




function removeitem(){



    for (i = 0; i < removebtn.length; i  ){
        let rbutton = removebtn[i];
        rbutton.addEventListener("click", function (){
            let TotalNumbervalue = TotalNumber.innerHTML 
            if(TotalNumbervalue > 0){
                TotalNumber.innerHTML--
                console.log('if statement for negative works')
            }
    
            rbutton.parentElement.remove()
        })
    }
}
    removeitem()




function additemtocart(){




for (i = 0; i < Atc.length; i  ){
    let button = Atc[i];
    button.addEventListener("click", function (){
        let TotalNumbervalue = TotalNumber.innerHTML 
        if(TotalNumbervalue > -1){
            
            TotalNumber.innerHTML  
        }
        let shopitem = button.parentElement
        let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
        let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
        let cartrow = document.createElement('div')
        let cartitems = document.getElementsByClassName('cartitems')[0]
        let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" id="qinput"><button class="removebtn">Remove</button></li>`
        cartrow.innerHTML = cartrowcontent
        cartitems.append(cartrow)
    })
}

}


additemtocart()

Ответ №1:

Вы можете значительно упростить свою логику, используя делегирование событий (см.: нажмите событие). Вы добавляете один список событий в текст документа (или любого общего предка кнопок/событий, которые вы хотите делегировать) и в зависимости от цели события запускаете соответствующие обратные вызовы.

 function addItemToCart(item) {
  console.log('add: ', item);
  // ...
}

function removeItemFromCart(item) {
  console.log('remove: ', item);
  // ...
}

function handleDocumentClick(event) {
  if (event.target.classList.contains('atcbtn')) {
    addItemToCart(event.target.parentElement);
  }
  if (event.target.classList.contains('removebtn')) {
    removeItemFromCart(event.target.parentElement);
  }
}

document.body.addEventListener('click', handleDocumentClick);

С помощью этого простого метода вам больше не нужно знать, сколько товаров/кнопок находится в корзине или магазине, все они вызовут соответствующий обратный вызов.

Вы также заметите, что в приведенном выше примере мы передаем значение event.target.parentElement обратного вызова, что означает, что мы можем приступить к работе с item ним без дальнейших запросов в обратных вызовах.

Следующая эффективность, которой вы, возможно, захотите воспользоваться и на которую опирается приведенный ниже фрагмент,-это атрибуты данных. Я добавил title и price каждого элемента в родительский div в качестве атрибутов данных, что позволяет нам получать доступ к этим данным без запроса дочерних элементов для их содержимого.

 <div class="item" data-price="12.99" data-title="Shirt 2">
  ...
</div>

Все, что тогда остается, — это написать логику добавления/удаления товаров из корзины и обновления соответствующего количества корзин в заголовке и общего количества корзин в корзине.

Фрагмент здесь не обрабатывает изменение количества в корзине, но, возможно, вы можете увидеть, как вы могли бы использовать делегирование, чтобы добавить логику…

Это много, чтобы написать свою собственную корзину и обработать проверку и т. Д. По пути вы можете взглянуть на библиотеки шаблонов или решения для корзины (на ум приходит snipcart).

 const cartbody = document.querySelector('.cartbody');
const cartbtn = document.getElementById('cartbtn');
const closeicon = document.getElementById('closeicon');

cartbtn.addEventListener('click', function () {
  cartbody.classList.toggle('cartbodyactive');
});

closeicon.addEventListener('click', function () {
  cartbody.classList.remove('cartbodyactive');
});

const totalNumber = document.querySelector('.totalnumber');
const cartItemsUl = document.querySelector('.cartitems');
const cartTotal = document.querySelector('.carttotal');

function addItemToCart(item) {
  console.log('add: ', item);

  const { price, title } = item.dataset;
  const itemLi = document.createElement('li');
  itemLi.className = 'cartitem';
  itemLi.dataset.title = title;
  itemLi.dataset.price = price;
  itemLi.innerHTML = `<span class="itemtitle">${title}</span>
    <span class="itemprice">${price}</span>
    <input type="number" class="qinput" id="qinput" value="1">
    <button type="button" class="removebtn">Remove</button>`;
  cartItemsUl.appendChild(itemLi);

  // update item count
  totalNumber.textContent =  totalNumber.textContent   1;

  // update cart total
  const updatedTotal = (parseFloat(cartTotal.dataset.total)   parseFloat(price)).toFixed(2);
  cartTotal.dataset.total = updatedTotal;
  cartTotal.textContent = `${updatedTotal}`;
}

function removeItemFromCart(item) {
  console.log('remove: ', item);

  const { price, title } = item.dataset;

  item.remove()

  // update item count
  // will need to account for the quantity input value
  totalNumber.textContent =  totalNumber.textContent - 1;

  // update cart total
  const updatedTotal = (parseFloat(cartTotal.dataset.total) - parseFloat(price)).toFixed(2);
  cartTotal.dataset.total = updatedTotal;
  cartTotal.textContent = `${updatedTotal}`;
}

function handleDocumentClick(event) {
  console.clear();
  if (event.target.classList.contains('atcbtn')) addItemToCart(event.target.parentElement);
  if (event.target.classList.contains('removebtn')) removeItemFromCart(event.target.parentElement);
}

document.body.addEventListener('click', handleDocumentClick); 
 *{ padding: 0; margin: 0; box-sizing: border-box;}::-webkit-scrollbar{ display: none;}.wrapper{ overflow-x: hidden;}.topnavcont{ padding: 1em 0em; align-items: center; height: 10vh; width: 100vw; display: flex; justify-content: space-around; background-color: white; box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px; position: fixed; z-index: 5;}.topleftnav{ display: flex; justify-content: space-between; width: 10%; margin-left: -3%; font-weight: bold;}.topleftnav li{ cursor: pointer; list-style: none; font-size: 1.05rem; transition: 0.3s ease; border-bottom: transparent solid 2px;}.topleftnav li:hover{ border-bottom: black solid 2px; transform: scale(1.1);}.topnavtitle{ margin-right: 2.5%;}.navcartcontainer{ display: flex; margin-right: -1%; }.topnavcont .totalnumber{ color: black; padding: 0.2em 0.4em; border-radius: 50%; font-size: 1.25rem; height: fit-content; /* cursor: pointer; */ font-weight: bold;}.topnavcont i{ font-size: 2rem; margin-left: 0.3em; cursor: pointer; transition: 0.4s ease; }.topnavcont i:hover{ transform: scale(1.15);}.p1{ height: 100vh; position: relative;}.p1 img{ object-fit: cover; height: 100vh; width: 100%;}.p1 .overlay::after{ content: ""; position: absolute; top: 10vh; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.4; height: 90vh; width: 100%;}.cartbody{ background-color: white; position: fixed; height: 100vh; width: 25vw; top: 10%; left: 75%; z-index: 2100; overflow-y: auto; transform: translateX(100%); transition: 0.7s ease; box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;}.carttotal{ font-size: 2rem; color: rgb(22, 113, 119); font-weight: bold; margin-top: 1.5em; text-align: center; margin-bottom: 3em;}.cartbody i{ font-size: 2.2rem; margin-left: 0.4em; margin-top: 0.2em; color: black; font-weight: 200; cursor: pointer; transition: 0.3s ease;}.cartbody i:hover{ transform: scale(1.15);}.cartbody input{ width: 2.2rem; height: auto;}.cartbodyactive{ transform: translateX(0%);}.carttitle{ text-align: center; margin-top: 1em; margin-bottom: 2em;}.cartitem{ display: flex; justify-content: space-evenly;}.cartitem .itemtitle{ font-size: 1.2rem;}.cartitems{ display: flex; flex-direction: column; row-gap: 3em; overflow-y: auto; list-style: none; padding-left: 0.5em;}.removebtn{ background-color: red; color: black; font-weight: bold; outline: none; border: none; padding: 0.5em 1em; cursor: pointer;}.p2{ height: 160vh; position: relative;}.p2title{ color: black; padding-top: 2.5em; margin-left: 7%;}.p2 img{ height: 200px; width: 300px;}.itemcontainer{ margin-top: 6em; display: flex; justify-content: space-around;}.itemcontainer2{ margin-top: 6em; display: flex; justify-content: space-around;}.item{ display: flex; flex-direction: column; align-items: center; min-height: 355px; justify-content: space-around;}.atcbtn{ background-color: white; cursor: pointer; text-decoration: none; color: black; width: 40%; text-align: center; font-weight: bold; border: black solid 2px; padding: 0.8em 0.5em; transition: 0.4s ease;}.atcbtn:hover{ background-color: black; color: white; font-weight: bold;} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-Commerce Website</title>

  <link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />

  <link rel="stylesheet" href="style.css">
  <script src="app.js" async></script>
</head>

<body>
  <div class="wrapper">
    <div class="p1">
      <div class="topnavcont">
        <ul class="topleftnav">
          <li class="topnavlink">Home</li>
          <li class="topnavlink">Shop</li>
        </ul>
        <h1 class="topnavtitle">The Store</h1>
        <div class="navcartcontainer">
          <h3 class="totalnumber">1</h3>
          <i class="fas fa-shopping-cart" id="cartbtn"></i>
        </div>
      </div>

      <img src="https://source.unsplash.com/random/200x200/?sig=0" alt="" class="bgimg">
      <div class="overlay"></div>
      <div class="cartbody">
        <i class="fal fa-times" id="closeicon"></i>
        <h2 class="carttitle">Shopping Cart</h2>
        <ul class="cartitems">
          <li class="cartitem" data-title="Shirt 2" data-price="12.99"><span class="itemtitle">Shirt 2</span>
            <span class="itemprice">$12.99</span>
            <input type="number" class="qinput" id="qinput" value="1">
            <button type="button" class="removebtn">Remove</button>
          </li>
        </ul>
        <div class="carttotal" data-total="12.99">Total: $12.99</div>

      </div>
    </div>

    <div class="p2">
      <h1 class="p2title">My Shop</h1>
      <div class="itemcontainer">
        <div class="item" data-price="8.99" data-title="Shirt 1">
          <img src="https://source.unsplash.com/random/200x200/?sig=1" alt="" class="item-img">
          <h1 class="item-title">Shirt 1</h1>
          <h3 class="itemprice">$8.99</h3>
          <!-- <a href="#" class="atcbtn">Add To Cart</a> -->
          <button type="button" class="atcbtn">Add To Cart</button>
        </div>

        <div class="item" data-price="12.99" data-title="Shirt 2">
          <img src="https://source.unsplash.com/random/200x200/?sig=2" alt="" class="item-img">
          <h1 class="item-title">Shirt 2</h1>
          <h3 class="itemprice" data-price="12.99">$12.99</h3>
          <!-- <a href="#" class="atcbtn">Add To Cart</a> -->
          <button type="button" class="atcbtn">Add To Cart</button>
        </div>

        <div class="item" data-price="3.99" data-title="Shirt 3">
          <img src="https://source.unsplash.com/random/200x200/?sig=3" alt="" class="item-img">
          <h1 class="item-title">Shirt 3</h1>
          <h3 class="itemprice" data-price="3.99">$3.99</h3>
          <!-- <a href="#" class="atcbtn">Add To Cart</a> -->
          <button type="button" class="atcbtn">Add To Cart</button>
        </div>

      </div>

    </div>
  </div>
</body>

</html>

Ответ №2:

Причина в том, что вы запускаете removeitem() после загрузки страницы. Таким образом, он проходит через document.getElementsByClassName(‘removebtn’) и возвращает кнопки удаления, которые у нас есть на странице при ее первой загрузке.

Вот почему вы можете удалить товары, которые уже были в корзине, но вы не можете удалить новые товары — у этих новых товаров есть кнопки «Удалить«, которые не повторялись в цикле «для… в«.

Вы можете исправить это, просто добавив removeitem() в нижней части функции обратного вызова внутри списка событий из Atc, поэтому каждый раз, когда вы добавляете новый товар в корзину, removeitem будет запускаться снова и повторяться через каждую кнопку удаления на странице, включая новые. Надеюсь, в этом есть смысл!

Это будет выглядеть так:

 function additemtocart() {
 


    for (i = 0; i < Atc.length; i  ) {
        let button = Atc[i];
        button.addEventListener("click", function () {
            let TotalNumbervalue = TotalNumber.innerHTML
            if (TotalNumbervalue > -1) {

                TotalNumber.innerHTML  
            }
            let shopitem = button.parentElement
            let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
            let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
            let cartrow = document.createElement('div')
            let cartitems = document.getElementsByClassName('cartitems')[0]
            let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" id="qinput"><button class="removebtn">Remove</button></li>`
            cartrow.innerHTML = cartrowcontent
            cartitems.append(cartrow)
            removeitem();
        })

    }

}


additemtocart()

Редактировать

Как я могу сделать то же самое с «»‘для(пусть i = 0; iдлина; i ){ qinput[i].значение= 1; }»»‘ Я также добавил его в нижнюю часть функции, но входное значение не обновляется

Таким образом, когда вы определяете cartrowcontent внутри списка событий Atc, вы не задаете класс qinput, а только идентификатор =>

 let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" id="qinput"><button class="removebtn">Remove</button></li>`

Что я сделал:

задействованный цикл qinput в функции:

 function updateQInput() {
    for (let i = 0; i < qinput.length; i  ) {
        qinput[i].value = 1;
    }
}

updateQInput();

И вызвал его в нижней части списка событий Atc (после добавления класса «qinput»):

 button.addEventListener("click", function () {
    let TotalNumbervalue = TotalNumber.innerHTML
    if (TotalNumbervalue > -1) {

        TotalNumber.innerHTML  
    }
    let shopitem = button.parentElement
    let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
    let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
    let cartrow = document.createElement('div')
    let cartitems = document.getElementsByClassName('cartitems')[0]
    let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput" id="qinput"><button class="removebtn">Remove</button></li>`
    cartrow.innerHTML = cartrowcontent
    cartitems.append(cartrow)
    removeitem();
    updateQInput();
}

Комментарии:

1. Как я могу сделать то же самое с «»‘для(пусть i = 0; i длина; i ){ qinput[i].значение= 1; }»»‘ Я также добавил его в нижнюю часть функции, но входное значение не обновляется

2. он не обновляется, потому что внутри списка событий Atc вы определяете входные данные cartrowcontent «qinput» без класса => ></span><тип ввода=»номер» id=»qi nput»> Я собираюсь отредактировать свой ответ, чтобы получить это, пожалуйста, проверьте его

Метки: