使用 javascript 在表中插入表单值

Question

document.getElementById("submit").onclick = function () {
  document.getElementById("table").style.display = "block";

  var table = document.getElementById("table");
  var row = table.insertRow(-1);
  var date = row.insertCell(0);
  var desc = row.insertCell(1);
  var amt = row.insertCell(2);
  date.innerHTML = document.getElementById("date").value;
  desc.innerHTML = document.getElementById("desc").value;
  amt.innerHTML = document.getElementById("amount").value;

  return false;
}

table {
  display: none;
}

<h1>Expense Tracker</h1>

<form action="">
  <label id="date">Date: </label>
  <input type="date" id="date">
  <br>

  <label id="desc">Description: </label>
  <input type="text" id="desc">
  <br>

  <label id="amount">Amount: </label>
  <input type="text" id="amount">
  <br>

  <input type="button" id="submit" value="Submit">
  <br>
</form>

<table id="table">
  <tr>
    <th>Date</th>
    <th>Description</th>
    <th>Amount</th>
  </tr>
</table>

我想通过单击提交按钮将表单中给出的输入插入到表中。我尝试使用此方法执行此操作，但它始终显示未定义。我哪里出错了？有更好的选择来做到这一点吗？我只想使用 JavaScript。

Answer 1

问题是你的标签。它们与您的输入字段具有相同的 ID。由于 document.getElementById("date") 只查找第一次出现的所需 id，因此会返回标签。

要解决此问题，您可以将标签更改为

<label for="date">Date: </label>

<label for="date">Date: </label>