Как добавлять обработчики событий на каждую кнопку постепенно на JavaScript? - PullRequest
Новая
       74

Как добавлять обработчики событий на каждую кнопку постепенно на JavaScript?

0 голосов
/ 02 августа 2020

Я создал элементы корзины с набором кнопок (-) (+) на каждом элементе. Как я могу добавить обработчики событий на каждый набор кнопок? Мои кнопки увеличиваются внутри моего javaScript (внутреннего HTML), так что элементы корзины, хранящиеся в localStorage, также могут увеличиваться.

Вот моя целая JavaScript функция для (-) и (+). 

function increaseDecrease(){

let increaseQty = document.querySelector(".increaseQuantityButton2");
let decreaseQty = document.querySelector(".decreaseQuantityButton2");

 var items = JSON.parse(localStorage.getItem('items'));  //This is array

 for (var i = 0; i <= items.length; i++){

    increaseQty.addEventListener('click', () => {             //increaseQty[i]... is having an error.
        if(items[i].name == increaseQty.dataset.name){
            let quantity = 1 + items[i].quantity;
            items[i].quantity = quantity;
            localStorage.setItem('items', JSON.stringify(items));
            location.reload(true);
        }   
    })

    decreaseQty.addEventListener('click', () => {
        if(items[i].name == increaseQty.dataset.name){
            if(items[i].quantity == 1){
                delete items[items[i].name];
                localStorage.setItem('items', JSON.stringify(items));
            }else{
                let quantity =  items[i].quantity - 1;
                items[i].quantity = quantity;
                localStorage.setItem('items', JSON.stringify(items));
                location.reload(true);
            }
        }
    })
    break;
 }
}
//Only first set of buttons are working in this.

Затем вся моя функция для отображения элементов с (-) (+) 

function displayCart2() {
 var items = JSON.parse(localStorage.getItem('items'));
let container = document.querySelector(".products2");
if(items && container){
    items = JSON.parse(localStorage.getItem("items"));
    container.innerHTML = "";
    Object.values(items).map(item => {
        container.innerHTML += `
        <div class="products2">
                    <div class="card">
                        <div class="row ">
                            <div class="col-2">
                               //items img
                            </div>
                           
                            <div class="col-10">
                                <div class="row">
                                    <div class="col-6">
                                        //item's name
                                    </div>
                                    <div class="col-6 text-right">
                                        //item's price
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                     //--(-) (+)--------------------------------------------               
                                        <div class="input-group">
                                            <div class="row">          
                                                <button class="btn decreaseQuantityButton2" data-name"${item.name}"><span class=" badge-pill" style="margin: 10px; padding-bottom: 5px; background: lightgray; color: white"> – </span></button>
                                            
                                            <input type="text" class="form-control text-center" value="${item.quantity}" style="border-radius: 25px; background: lightgray; color: black; width:50px;" name="item1-quantity" >
                                            
                                                 <button class="btn increaseQuantityButton2" data-name="${item.name}"><span class=" badge-pill" style="margin: 10px; padding-bottom: 5px; background: black; color: white" > + </span></button>
                                            </div>
                                        </div>    
                                    </div>
                                    <div class="col-6 text-right">
                                        //item remove button
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
        `;
    });
 
  }
}
...