Question

我正在尝试使用JavaScript创建一个非常基本的购物清单-每次我单击“添加商品”时，我都希望该商品和一个按钮（“标为已购买”）出现在清单中。
我已经编写了以下代码，但无法弄清楚为什么它不起作用。现在，如果我添加一个项目并提交，则仅显示表格行“项目说明和操作”。另外，我的控制台中没有显示任何错误。

您有什么想法吗？

预先感谢，约阿纳

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>

Answer 1

在 addItem（）中的 for 循环中，您有两个问题。

您必须检查 input 变量的 length 属性，而不是 item 。
您还必须将 item 对象推到 items 数组：

您的for循环应为：

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>

在购物清单中添加商品（使用javascript）

1 个答案: