CODEWITHSUNDEEP
javascript
Ioana
Ioana

Reputation: 47

adding items in a shopping list (using javascript)

I am trying to create a very basic shopping list using JavaScript - each time I click on "add item" I want to have that item and a button ("mark as bought") appear in the list.
I have written the following code but I can't figure it out why it is not working. Right now if I add an item and submit, I only have the table row "Item Description and Action" showing up. Also, there are no errors showing up in my console.

Do you have any ideas?

Thanks in advance, Ioana 

var items = []; 

function deseneazaTabel(){
    if (items.length === 0){
        document.getElementById("list").style.display = "none";
    } else {
        document.getElementById("list").style.display = "";
    }
    var str = ""; 
    for (var i = 0; i < items.length; i++){
        str += `<tr>
                <td>${items[i].name}</td>
                <td><button>Mark as bought</button></td>
                </tr>`;
    }
    document.querySelector("table tbody").innerHTML = str;
}

function addItem(form, event){
    event.preventDefault(); 
    var item = {}; 
    var input = form.querySelectorAll("input[name]"); 
    for(var i = 0; i < item.length; i++ ){
        var a = input[i].getAttribute("name");
        var v = input[i].value; 
        item[a] = v; 
    }
    document.getElementById("list").classList.remove("hidden");
    deseneazaTabel(); 
}
<body onload = "deseneazaTabel();">
  <h1 class="centerText bold">SHOPPING LIST</h1>
  <form class="centerText" onsubmit="addItem(this,event);">
      <input type="text" name="name">
      <input type="submit" class="addBtn" value="Add item">
  </form>
  <p class="centerText sortButtons">
      <button class="sort">Sort asc</button>
      <button class="sort">Sort desc</button>
  </p>
  <div id="list" class="centerText hidden">
      <table>
          <thead>
              <tr>
                  <td>Item Description</td>
                  <td id="cellspaced">Action</td>
              </tr>
          </thead>
          <tbody>
          </tbody>
      </table>
  </div>
</body>

Upvotes: 0

Views: 1074

Answers (1)

Mamun
Mamun

Reputation: 68933

You have two issue in the for loop inside addItem().

  1. You have to check the length property of input variable instead of item.
  2. You also have to push the item object to the items array:

Your for loop should be:

for(var i = 0; i < input.length; i++ ){
  var a = input[i].getAttribute("name");
  var v = input[i].value; 
  item[a] = v; 
  items.push(item);
}


var items = []; 

function deseneazaTabel(){
  if (items.length === 0){
      document.getElementById("list").style.display = "none";
  } else {
      document.getElementById("list").style.display = "";
  }
  var str = ""; 
  for (var i = 0; i < items.length; i++){
      str += `<tr>
              <td>${items[i].name}</td>
              <td><button>Mark as bought</button></td>
              </tr>`;
  }
  document.querySelector("table tbody").innerHTML = str;
  
}

function addItem(form, event){
  var item = {}; 
  var input = form.querySelectorAll("input[name]"); 
  for(var i = 0; i < input.length; i++ ){
      var a = input[i].getAttribute("name");
      var v = input[i].value; 
      item[a] = v; 
      items.push(item);
  }
  document.getElementById("list").classList.remove("hidden");
  deseneazaTabel(); 
  event.preventDefault(); 
}
<body onload = "deseneazaTabel();">
  <h1 class="centerText bold">SHOPPING LIST</h1>
  <form class="centerText" onsubmit="addItem(this,event);">
      <input type="text" name="name">
      <input type="submit" class="addBtn" value="Add item">
  </form>
  <p class="centerText sortButtons">
      <button class="sort">Sort asc</button>
      <button class="sort">Sort desc</button>
  </p>
  <div id="list" class="centerText hidden">
      <table>
          <thead>
              <tr>
                  <td>Item Description</td>
                  <td id="cellspaced">Action</td>
              </tr>
          </thead>
          <tbody>
          </tbody>
      </table>
  </div>
</body>

Upvotes: 3

Related Questions