adding items in a shopping list (using javascript)

Question

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>

There are indeed errors currently - press "Run code snippet", try to fix the current syntax errors — CertainPerformance
– CertainPerformance, Commented Nov 28, 2018 at 4:44

Mamun · Accepted Answer · 2018-11-28 05:12:34Z

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

You have to check the length property of input variable instead of item.
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>

Collectives™ on Stack Overflow

adding items in a shopping list (using javascript)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related