CODEWITHSUNDEEP
javascripthtmlstring
levinson dsouza
levinson dsouza

Reputation: 40

localStorage second parameter doesn't accept input.value

I'm using localStorage to store a few values but it doesn't work for my inputs which I've confirmed are strings. it works for hardcoded strings like "chicken" but not input.value here's my code : https://codepen.io/levinson2504/pen/gObzZON?editors=0011

let menu = [];

      const menuDiv = document.querySelector("#menu");
      const inputName = document.querySelector("#item-name");
      const inputPrice = document.querySelector("#item-price");

      document.querySelector("#add-btn").addEventListener("click", addItem);
      document.querySelector("#del-btn").addEventListener("click", () => delItem(menu.length - 1));

  function render(items) {
        menuDiv.innerHTML = "";
        [inputName, inputPrice].forEach(input => input.value = "");
        items.forEach((item, index) => menuDiv.append(menuElement(item, index)));
      }

      function menuElement(item, index) {
        const menuText = document.createElement("span");
        menuText.innerText = `${item.itemName}   -   ${item.itemPrice}`;

        const delBtn = document.createElement("button");
        delBtn.innerText = "delete item";
        delBtn.addEventListener("click", () => delItem(index));

        const itemDiv = document.createElement("div");
        [menuText, delBtn].forEach(el => itemDiv.append(el));

        return itemDiv;
      }

 function delItem(index) {
        menu.splice(index, 1);
        render(menu);
      }

  function addItem() {
        menu.push({
          itemName: inputName.value, 
          itemPrice: inputPrice.value
          });
        render(menu);
        let item = "chicken"
        localStorage.setItem("itemName", item);
        localStorage.setItem("itemPrice", inputPrice.value );
        console.log(localStorage.getItem("itemName"));
        console.log(localStorage.getItem("itemPrice"));
      }

Upvotes: 0

Views: 222

Answers (2)

Manasi Agte
Manasi Agte

Reputation: 11

Check whether inputPrice.value is string or not as setItem accepts string values. Try using inputPrice.value.toString()/ String(inputPrice.value)

Upvotes: 0

Cully
Cully

Reputation: 6975

Your render method clears your input values. Since you're calling render before setting the value in localStorage, you'll just get an empty value. Store the value in localStorage before calling render:

function addItem() {
  menu.push({
    itemName: inputName.value, 
    itemPrice: inputPrice.value
  });

  let item = "chicken"
  localStorage.setItem("itemName", item);
  localStorage.setItem("itemPrice", inputPrice.value);
  console.log(localStorage.getItem("itemName"));
  console.log(localStorage.getItem("itemPrice"));

  render(menu);
}

Upvotes: 1

Related Questions