JS автообновление по клик событию

Question

Всем привет! А как в JS автоматический обновить значение переменные, объекты ... по клик событию

const product = {
    id: 1,
    pricePerUnity: 500,
    name: 'Product name',
    imageUrl: 'https://cdn.dribbble.com/users/10882/screenshots/15172621/media/cd2246d5d0f54f9a4316bd4d276764b2.png?compress=1&resize=400x300',
};

const cartEl = document.querySelector('[data-id="cart"]');
const inputQty = cartEl.querySelector('[data-id="qty"]');
const incBtn = cartEl.querySelector('[data-action="inc"]');
const decBtn = cartEl.querySelector('[data-action="dec"]');
const totalEl = cartEl.querySelector('[data-id="total"]');
const errorEl = cartEl.querySelector('[data-id="message"]');
const priceEl = cartEl.querySelector('[data-id="price"]');

console.log(typeof inputQty)

totalEl.textContent = parseInt(inputQty * product.pricePerUnity);
inputQty.value = product.id;
priceEl.textContent = product.pricePerUnity;

decBtn.addEventListener('click', () => {    
    
    if (inputQty.value <= 0) {
        errorEl.textContent = 'Минимум 1шт';
        decBtn.disabled = true;
        inputQty.value === 0;
    } else if (inputQty.value >= 0) {
        inputQty.value --;
        decBtn.disabled = false;
    }

});

incBtn.addEventListener('click', () => {    
    
    if (inputQty.value >= 10) {
        errorEl.textContent = 'Максимум 10шт';
        incBtn.disabled = true;
        inputQty.value === 10;
    } else if (inputQty.value <= 10) {
        inputQty.value ++;
        incBtn.disabled = false;
    }

});



const order = {
    idOrder: 1,
    idProduct: product.id,
    quantity: inputQty.value,
    pricePerUnity: product.pricePerUnity,
};

<div data-id="cart">
    <div data-id="price"></div>
    <input data-id="qty" min = "1" max = "10" value="" />
    <button data-action="inc">+</button>
    <button data-action="dec">-</button>
    <div data-id="total"></div>
    <div data-id="message"></div>
  </div>

Answer 1

Если речь о том, чтобы при нажатии на плюс или минус, менялось значение у вас в тотале, то просто добавьте вот эту строчку в конце event listener`a

totalEl.innerText = parseInt(inputQty.value * nokia.pricePerUnity);

вот так, в каждый из них.

   const nokia = {
    id: 1,
    pricePerUnity: 239,
    name: 'Product name',
    imageUrl: 'https://cdn.dribbble.com/users/10882/screenshots/15172621/media/cd2246d5d0f54f9a4316bd4d276764b2.png?compress=1&resize=400x300',
};

const cartEl = document.querySelector('[data-id="cart"]');
const inputQty = cartEl.querySelector('[data-id="qty"]');
const incBtn = cartEl.querySelector('[data-action="inc"]');
const decBtn = cartEl.querySelector('[data-action="dec"]');
const totalEl = cartEl.querySelector('[data-id="total"]');
const errorEl = cartEl.querySelector('[data-id="message"]');
const priceEl = cartEl.querySelector('[data-id="price"]');



inputQty.value = nokia.id;
priceEl.textContent = nokia.pricePerUnity;

decBtn.addEventListener('click', () => {    
       

    inputQty.value--;
   
        
        if (inputQty.value >0) {
         
        decBtn.disabled = false;
        incBtn.disabled = false;
                 order.quantity = inputQty.value;
        errorEl.textContent = '';
    }
     else if (inputQty.value <=0) {
    decBtn.disabled = true;
    incBtn.disabled = false;
     errorEl.textContent = '1шт - минимальный размер заказа';      
         order.quantity = inputQty.value;
        } 
    totalEl.innerText = order.total();



});

incBtn.addEventListener('click', () => {    
    
    if (inputQty.value >= 10) {
        errorEl.textContent = '10шт - максимальный размер заказа';
        incBtn.disabled = true;
        decBtn.disabled = false;

    } else if (inputQty.value <= 10) {
        ++inputQty.value;
        order.quantity = inputQty.value;
        incBtn.disabled = false;
        decBtn.disabled = false;
        errorEl.textContent = '';
    }
    totalEl.innerText = order.total();

});



const order = {
    idOrder: 1,
    idProduct: nokia.id,
    quantity: inputQty.value,
    pricePerUnity: nokia.pricePerUnity,
    total(){
    return parseInt( this.quantity * this.pricePerUnity)},
   
};
totalEl.textContent = order.total();

Если вы о чём-то другом - уточните вопрос.

БЛОГ НА HUSL

JS автообновление по клик событию

Ответы (1 шт):