主页 / 问题 / 1278785
Accepted
mat
Asked:2022-05-06 19:11:33 +0000 UTC2022-05-06 19:11:33 +0000 UTC

JS在点击事件时自动刷新

  • 772

大家好！以及如何在 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>

javascript

1 个回答

  1. Best Answer

    如果您想在单击加号或减号时更改总计中的值，则只需将此行添加到事件侦听器的末尾

    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();

    如果您在谈论其他内容，请澄清您的问题。

    • 2

相关问题