Precīza iepirkumu groza skaitītāju ievades elementu vērtību atjaunināšana JavaScript If-Else paziņojumos

Efektīvi JavaScript skaitītāja atjauninājumi vairākiem produktiem

JavaScript dinamiskās ievades elementi var būt sarežģīti strādāt, jo īpaši, ja nosacīti tiek atjauninātas vērtības ja-citādi paziņojumiem. Precīza kopējo summu un summu reģistrēšana ir ļoti svarīga tādās situācijās kā preču pievienošana tiešsaistes iepirkumu grozam. Tomēr vairāku lietu pārvaldīšana šajā situācijā izstrādātājiem bieži rada grūtības.

Šajā rakstā tiks apspriesta izplatīta problēma, kad, atlasot jaunas lietas iepirkumu grozā, tiek atiestatīts iepriekš izvēlēto preču skaitītājs. Šķiet, ka skaitītāji tiek atiestatīti, veicot pārsūtīšanu starp vienumiem, lai gan sākotnēji tie darbojas pareizi. Lietotājus apmulsina šāda rīcība, jo ne visiem grozā esošajiem produktiem ir norādīts pareizais daudzums.

Mēs apskatīsim koda piemēru, kur šī problēma rodas, un apspriedīsim cēloni. Lai nodrošinātu vienmērīgu darbību, ir svarīgi zināt, kā kontrolēt katra produkta skaitītāju un garantēt, ka visi ievadītie skaitļi paliek nemainīgi. Ar dažiem uzlabojumiem, ja-citādi paziņojumi, kas izmanto JavaScript loģiku, var to pareizi apstrādāt.

Kad pabeigsit lasīt šo rakstu, jūs zināt, kā novērst problēmu un saglabāt visus skaitītājus, pārliecinoties, ka iepirkumu grozā vienmēr tiek rādīts pareizais katras preces daudzums, pat pārejot no vienas preces uz otru.

Dinamiskā groza atjaunināšanas problēmu risināšana, izmantojot JavaScript

Iepriekš minētie skripti atrisina bieži sastopamu problēmu, izmantojot JavaScript, lai pārvaldītu vairākus iepirkumu grozā esošos produktus. Galvenā problēma ir tāda, ka, pievienojot jaunu vienumu, tiek atiestatīti iepriekš pievienoto vienumu skaitītāji. Skripti izmanto uz objektu balstītu metodi, lai saglabātu vienumu skaitu un kopsummas kopā ar notikumu uztvērējiem, lai to risinātu. Mēs garantējam, ka katra produkta skaitītājs tiek atjaunināts un uzturēts atsevišķi no citiem, netraucējot tiem, izmantojot ratiņi objektu. Šī metode novērš atiestatīšanas problēmu, lai katra produkta skaitīšana būtu precīza.

The updateGrozs metode, kas dinamiski pārvalda preču pievienošanu grozam, ir būtiska risinājuma sastāvdaļa. Šī funkcija izmanto unikālo skaitītāja atslēgu (piemēram, "miloCounter"), lai noteiktu, vai grozā ir prece. Skripts inicializē skaitītāju, ja vienums tiek pievienots pirmo reizi. Ja nē, funkcija pārrēķina kopējo cenu un palielina pašreizējo skaitītāju. The innerHTML atribūts atjaunina HTML, lai lietotājs varētu uzreiz redzēt izmaiņas.

Katras grozā esošās preces precīzu attēlojumu garantē renderCart funkciju. Tas atkārtojas caur grozsPreces objektu, pārbaudot, vai katra produkta skaits pārsniedz nulli. Tādā gadījumā funkcija izveido nepieciešamo HTML, lai parādītu katras preces summu un kopējās izmaksas. Tas garantē, ka jaunu produktu pievienošana nepārraksta vecos produktus un saglabā groza displeja pašreizējo stāvokli. Tiešsaistes lietojumprogrammās šī metode ir ļoti noderīga dinamiska satura apstrādei.

Turklāt konsole.assert tiek izmantots vienību pārbaudēs, lai pārbaudītu, vai preču skaitītāji un kopsummas darbojas, kā paredzēts. Noklikšķinot uz produkta pogām un pārliecinoties, ka paredzamās skaitītāja vērtības atbilst faktiskajiem rezultātiem, kas saglabāti ratiņi objektu, šie testi imitē lietotāja mijiedarbību. Tas garantē pareizu argumentāciju un novērš kļūdu iekļūšanu neatklātām. Ņemot vērā visas lietas, skripti nodrošina atkārtoti lietojamu un modulāru pieeju produktu atjauninājumu pārvaldībai iepirkumu grozā, kas darbojas ar JavaScript.

var milo = document.getElementById('milo');
var ovaltine = document.getElementById('ovaltine');
var bournvita = document.getElementById('bournvita');
var miloPrice = 2000.00, miloCounter = 0, miloAmount = 0;
var ovaltinePrice = 1500.00, ovaltineCounter = 0, ovaltineAmount = 0;
var bournvitaPrice = 1850.00, bournvitaCounter = 0, bournvitaAmount = 0;

var cart = {}; // Object to store counters for each item

function updateCart(item, price, counterKey) {
    if (!cart[counterKey]) { cart[counterKey] = 1; } 
    else { cart[counterKey] += 1; }
    var total = cart[counterKey] * price;
    document.getElementById('cartdetails').innerHTML +=
    '<tr><td>' + cart[counterKey] + '</td><td>' + total + '</td></tr>';
}

milo.addEventListener('click', function() { updateCart('milo', miloPrice, 'miloCounter'); });
ovaltine.addEventListener('click', function() { updateCart('ovaltine', ovaltinePrice, 'ovaltineCounter'); });
bournvita.addEventListener('click', function() { updateCart('bournvita', bournvitaPrice, 'bournvitaCounter'); });

var cartItems = {
    'milo': { price: 2000, count: 0, total: 0 },
    'ovaltine': { price: 1500, count: 0, total: 0 },
    'bournvita': { price: 1850, count: 0, total: 0 }
};

function updateCartItem(item) {
    cartItems[item].count += 1;
    cartItems[item].total = cartItems[item].count * cartItems[item].price;
    renderCart();
}

function renderCart() {
    var cartHTML = '';
    for (var item in cartItems) {
        if (cartItems[item].count > 0) {
            cartHTML += '<tr><td>' + cartItems[item].count + '</td><td>' + cartItems[item].total + '</td></tr>';
        }
    }
    document.getElementById('cartdetails').innerHTML = cartHTML;
}

document.getElementById('milo').addEventListener('click', function() { updateCartItem('milo'); });
document.getElementById('ovaltine').addEventListener('click', function() { updateCartItem('ovaltine'); });
document.getElementById('bournvita').addEventListener('click', function() { updateCartItem('bournvita'); });

function testCartCounter() {
    var testCart = { 'milo': 0, 'ovaltine': 0, 'bournvita': 0 };
    function clickProduct(item) { testCart[item] += 1; }
    clickProduct('milo');
    clickProduct('ovaltine');
    console.assert(testCart['milo'] === 1, 'Milo should have 1 count');
    console.assert(testCart['ovaltine'] === 1, 'Ovaltine should have 1 count');
    clickProduct('milo');
    console.assert(testCart['milo'] === 2, 'Milo should have 2 counts');
    console.log('All tests passed');
}

testCartCounter();

Stāvokļa uzturēšana un skaitītāja atiestatīšanas novēršana JavaScript iepirkumu grozos

Katras grozā esošās preces statusa saglabāšana ir izplatīta problēma, strādājot ar dinamiskiem iepirkumu groziem JavaScript, jo īpaši, ja tiek pievienoti jauni produkti. Problēma parasti rodas, kad notikumu uztvērēji atiestata skaitu, pārslēdzoties starp produktiem, jo ​​tie nav pareizi saglabāti vai saglabāti katram produktam. Globāla objekta izveide, kas satur katras grozā esošās preces statusu, būtu efektīvāka metode, kā to apstrādāt. Tādā veidā iepriekšējo vienumu skaitītāji nemainās pat tad, kad tiek noklikšķināts uz jauna vienuma.

Varat vienkārši piekļūt un rediģēt katra produkta daudzumu un cenu bez citu skripta elementu iejaukšanās, saglabājot tos globālā objektā, piemēram, grozsPreces. Turklāt uz objektu balstītā metode piedāvā labi definētu struktūru, kas atvieglo vairāku vienumu pārvaldību vienlaikus. Attiecīgā objekta daļa tiek mainīta katru reizi, kad tiek noklikšķināts uz preces, un izmaiņas tiek uzreiz parādītas iepirkumu groza saskarnē.

Ir svarīgi arī pārliecināties, ka iepriekšējie preču statusi tiek pārbaudīti un uzturēti katrai groza renderēšanai vai atjauninājumam. Lai to paveiktu, atveidojiet grozu, izmantojot jaunākos datus, kas tiek glabāti grozsPreces objektu. Šī metode garantē, ka visas grozā esošās preces parāda pareizos skaitļus un kopsummas pat pēc preču pievienošanas vai noņemšanas, izvairoties no iepriekšējo datu pārrakstīšanas problēmas.