Member Avatar for littledevils326

I am creating a web page where the user and select an item by clicking on the button. The details of the item selected will be displayed in a dropbox. At the moment I can get it to update the quantity if the user selects it again. The problem which I am having is, say if the user first click on btnBuy1 (details displayed in dropbox), then clicks on btnBuy2 (again, details are displayed), but when they click on btnBuy2 again , the details from btnBuy2 is updated but the details from btnBuy1 disappears.

            $("#btnBuy0").click(function()
            {
                if (!sessionStorage['quantity0'])
                {
                    sessionStorage['quantity0'] = 1;
                    $("#dropbox").append('<span id = "0"><img class = "thumb" src="../images/21_metoyou.jpg" />' + teddy[0].desc + ", Price £"
                 + teddy[0].price + ", Quantity: " + sessionStorage.getItem('quantity0') + "</span><br/>");

                }           
                else
                {
                    sessionStorage['quantity0']++;
                    $("#dropbox").html('<span id = "0"><img class = "thumb" src="../images/21_metoyou.jpg" />' + teddy[0].desc + ", Price £"
                 + teddy[0].price + ", Quantity: " + sessionStorage.getItem('quantity0') + "</span><br/>");

                }
                if (Modernizr.sessionstorage) 
                {  // check if the browser supports sessionStorage
                    myids.push(teddy[0].partnum); // add the current username to the myids array
                    sessionStorage["ids"]=JSON.stringify(myids); // convert it to a string and put into sessionStorage
                }   
                else 
                {
                 // use cookies instead of sessionStorage
                }
            });
            $("#btnBuy1").click(function()
            {
                if (!sessionStorage['quantity1'])
                {
                    sessionStorage['quantity1']=1;
                    $("#dropbox").append('<span id = "1"><img class = "thumb" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £"
                 + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "</span><br/>");

                }
                else
                {
                    sessionStorage['quantity1']++;
                    $("#dropbox").html('<span id = "1"><img class = "thumb" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £"
                 + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "</span><br/>");

                }
                if (Modernizr.sessionstorage) 
                {  // check if the browser supports sessionStorage
                    myids.push(teddy[1].partnum); // add the current username to the myids array
                    sessionStorage["ids"]=JSON.stringify(myids); // convert it to a string and put into sessionStorage
                } 
                else 
                {
                 // use cookies instead of sessionStorage
                }
            });
  • 2 Contributors
  • 1 Reply
  • 212 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

The disappearing item is happening because the code replaces the entire dropbox when updating one product. That makes the second update overwrite the whole list instead of changing just that product’s quantity. Don’t call .html() on the container to update a single item; instead render each cart row with a stable id or data-attribute and update that row only.

A simple, safe pattern:

  • Give each rendered product a predictable id (e.g. id="item-0" — avoid starting IDs with a bare digit).
  • Keep the quantity inside its own element (e.g. <span class="qty">1</span>).
  • When a buy button is clicked, read and increment the stored quantity, then either append a new row (if that id isn’t present) or update the .qty inside the existing row.

Example (generic, not a copy of existing code):

$(document).on('click', '.btnBuy', function(){
  var id = $(this).data('id');                 // data-id on the button
  var key = 'quantity-' + id;
  var qty = parseInt(sessionStorage.getItem(key), 10) || 0;
  qty++;
  sessionStorage.setItem(key, qty);

  var $row = $('#item-' + id);
  if (!$row.length) {
    $('#dropbox').append(
      '<span id="item-' + id + '">Product ' + id + ' — Quantity: <span class="qty">' + qty + '</span></span><br>'
    );
  } else {
    $row.find('.qty').text(qty);
  }
});

Other practical tips:

  • Don’t push the same part number into your ids array on every click — check for existence before pushing.
  • SessionStorage stores strings; use parseInt/setItem to avoid NaN/concatenation issues.
  • Prefer a single cart object in sessionStorage (JSON) for easier persistence and rendering.
  • Use event delegation and data-attributes so you don’t need one click handler per button.

: changing the update strategy as above will stop other items disappearing. : avoid using global selectors like $("span").html(...) — they affect everything on the page.

Member Avatar for Member #949455

The problem which I am having is, say if the user first click on btnBuy1 (details displayed in dropbox), then clicks on btnBuy2 (again, details are displayed), but when they click on btnBuy2 again , the details from btnBuy2 is updated but the details from btnBuy1 disappears.

Does this code works for 1 button?

Try this:

$(document).ready(function(){

if (!sessionStorage['quantity0']){

 sessionStorage['quantity0'] = 1;

$("#btnBuy0").click(function(){

$("#dropbox").append('<img class = "thumb" src="../images/21_metoyou.jpg" />' + teddy[0].desc + ", Price £" + teddy[0].price + ", Quantity: " + sessionStorage.getItem('quantity0')");

 }else{

sessionStorage['quantity0']++;

$("span").html("<img class = "thumb" src="../images/21_metoyou.jpg" />' + teddy[0].desc + ", Price £" + teddy[0].price + ", Quantity: " + sessionStorage.getItem('quantity0')");

 }

if (Modernizr.sessionstorage){ // check if the browser supports sessionStorage
myids.push(teddy[0].partnum); // add the current username to the myids array
sessionStorage["ids"]=JSON.stringify(myids); // convert it to a string and put into sessionStorage

}else{// use cookies instead of sessionStorage
}
});

I didn't test it, it's only 1 button.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.