Why I am getting 0 as my value from an input field in a plus and minus button

Question

I am trying to store a key value pairs from an input field after pressing the plus or minus button in localStorage and all I am getting it 0 as the values when viewed in application using the console

Here is the localStorage code

var inputValue = document.getElementById("shirtValue").value; 
localStorage.setItem("shirtValue", inputValue);

var trouser = document.getElementById("trouserValue").value;
localStorage.setItem("trouserValue", trouser);

Here is the html code

           <p class="second-booking-container-icon" name="product" 
                   value="100" id="qnty_1">
                  Shirt(s)</p>
        <button type="button" class="sub" data-target="shirt">-</button>
         <input type="text" value="0" class="field_shirt" id="shirtValue" 
               disabled />
        <button type="button" class="add" data-target="shirt">+ </button>
       <p class="display_shirt" name="price" max="3" min="1">&#8358; 0</p>
                  </p>

      <p class="second-booking-container-icon" name="product" value="100" 
              id="qnty_2">
           Trouser(s)</p>
       <div><p>
        <button type="button" class="sub" data 
                 target="trousers">−</button>
            <input type="text" value="0" class="field_trousers" 
                    id="trouserValue" disabled />
                               <button type="button" class="add" data- 
                      target="trousers">+</button>
                 <p class="display_trousers" name="price" max="3" 
                 min="1">&#8358; 0</p>
                            </p>
                        </div>

Here is the Javascript file

      var subElm = document.querySelectorAll('.sub');
      var addElm = document.querySelectorAll('.add');
      var totalValueElm = document.getElementById('totalValue');


   for (var i = 0; i < subElm.length; i++) {
   subElm[i].addEventListener('click', function () {
    var targetItem = this.getAttribute('data-target');
    var inputElm = document.querySelector('.field_' + targetItem);
    var displayElm = document.querySelector('.display_' + targetItem);
    var currentValue = +inputElm.getAttribute('value');

    if (currentValue !== 0) {
        var incValue = currentValue - 1;
        var strValue = ' ' + incValue;
        inputElm.setAttribute('value', incValue);
        // displayElm.innerHTML = "&#8358;" + strValue;
      displayElm.innerHTML = "&#8358 " + incValue * 100;
        totalValueElm.innerText = Number(totalValueElm.innerText) - 100;
    }
   });

     addElm[i].addEventListener('click', function () {
    var targetItem = this.getAttribute('data-target');
    var inputElm = document.querySelector('.field_' + targetItem);
    var displayElm = document.querySelector('.display_' + targetItem);
    var currentValue = +inputElm.getAttribute('value');
    var incValue = currentValue + 1;
    var strValue = ' ' + incValue;
    inputElm.setAttribute('value', incValue);
    // displayElm.innerHTML = "&#8358;" + strValue;
    displayElm.innerHTML="&#8358 "+ incValue * 100;
    totalValueElm.innerText = Number(totalValueElm.innerText) + 100;
    var totalValue= totalValueElm.innerText;
    console.log(totalValue);

    // localStorage to set item for total in summary page
    localStorage.setItem("values", totalValue);
});
}

I want the trouserValue and skirtValue to actually show the real value when the plus and minus button is pressed and saved to localStorage to actually show

Answer 1

<input type="text" value="0" class="field_shirt" id="shirtValue" disabled /> 

<input type="text" value="0" class="field_trousers" id="trouserValue" disabled />

The issue lies in these 2 bits of html. You are setting the value of the input to 0, so when you retrieve the value it is being stored as 0 and your JS never changes the value of this before you store to localStorage.

I have created a codepen here which includes some changes: https://codepen.io/caeking/pen/RzyKmV

In the pen I have edited your buttons to have a unique id and binded an event to each button. This then takes the current value of the shirtValue or trouserValue, parses that to an integer and either subtracts or adds 1. You can use this as a base and instead of alerting the value you can save to localStorage