Question

我正在制作简单的 JavaScript 程序，我必须从用户那里获取五个个人详细信息，例如姓名、地址、城市、性别和年龄。我必须以表格格式显示这些详细信息，但程序无法运行。

var btn1 = document.getElementbyId("btn");
btn1.addEventListener("click", details);
var row = 1;

function details() {
  var name = document.getElementbyId("name").value;
  var address = document.getElementbyId("address").value;
  var city = document.getElementbyId("city").value;
  var age = document.getElementbyId("age").value;
  var gender = document.getElementbyId("gender").value;

  var table = document.getElementbyId("display");

  var newrow = table.insertRow(row);

  var cell1 = newrow.insertCell(0);
  var cell2 = newrow.insertCell(1);
  var cell3 = newrow.insertCell(2);
  var cell4 = newrow.insertCell(3);
  var cell5 = newrow.insertCell(4);

  cell1.innerHtml = name;
  cell2.innerHtml = address;
  cell3.innerHtml = city;
  cell4.innerHtml = age;
  cell5.innerHtml = gender;

  row++;
}

<div>
  name: <input type="text" name="n1" id="name"><br><br> address: <input type="text" name="a" id="address"><br><br> city: <input type="text" name="c1" id="city"><br><br> age: <input type="text" name="a1" id="age"><br><br> gender: <input type="text" name="g1"
    id="gender"><br><br>
  <button id="btn">submit</button><br><br>
</div>
<table id="display" border="1" cellspacing="0">
  <tr>
    <th>Name</th>
    <th>address</th>
    <th>city</th>
    <th>age</th>
    <th>gender</th>
  </tr>
</table>

Answer 1

您的代码中有几个错误。您需要使用 document.getElementById 和 innerHTML 而不是 innerHtml：

var btn1 = document.getElementById("btn");
btn1.addEventListener("click", details);
var row = 1;

function details() {
  var name = document.getElementById("name").value;
  var address = document.getElementById("address").value;
  var city = document.getElementById("city").value;
  var age = document.getElementById("age").value;
  var gender = document.getElementById("gender").value;

  var table = document.getElementById("display");

  var newrow = table.insertRow(row);

  var cell1 = newrow.insertCell(0);
  var cell2 = newrow.insertCell(1);
  var cell3 = newrow.insertCell(2);
  var cell4 = newrow.insertCell(3);
  var cell5 = newrow.insertCell(4);

  cell1.innerHTML = name;
  cell2.innerHTML = address;
  cell3.innerHTML = city;
  cell4.innerHTML = age;
  cell5.innerHTML = gender;

  row++;
}

<div>
  name: <input type="text" name="n1" id="name"><br><br> address: <input type="text" name="a" id="address"><br><br> city: <input type="text" name="c1" id="city"><br><br> age: <input type="text" name="a1" id="age"><br><br> gender: <input type="text" name="g1"
    id="gender"><br><br>
  <button id="btn">submit</button><br><br>
</div>
<table id="display" border="1" cellspacing="0">
  <tr>
    <th>Name</th>
    <th>address</th>
    <th>city</th>
    <th>age</th>
    <th>gender</th>
  </tr>
</table>

Answer 2

<div>
  name: <input type="text" name="n1" id="name"><br><br> address: <input type="text" name="a" id="address"><br><br> city: <input type="text" name="c1" id="city"><br><br> age: <input type="text" name="a1" id="age"><br><br> gender: <input type="text" name="g1"
    id="gender"><br><br>
  <button id="btn">submit</button><br><br>
</div>
<table id="display" border="1" cellspacing="0">
  <tr>
    <th>Name</th>
    <th>address</th>
    <th>city</th>
    <th>age</th>
    <th>gender</th>
  </tr>
</table>
<script>
document.getElementById("btn").addEventListener("click", function() {
  var name = document.getElementById("name").value;
  var address = document.getElementById("address").value;
  var city = document.getElementById("city").value;
  var age = document.getElementById("age").value;
  var gender = document.getElementById("gender").value;

  var table = document.getElementById("display");

  var newrow = table.insertRow(row);

  var cell1 = newrow.insertCell(0);
  var cell2 = newrow.insertCell(1);
  var cell3 = newrow.insertCell(2);
  var cell4 = newrow.insertCell(3);
  var cell5 = newrow.insertCell(4);

  cell1.innerHTML  = name;
  cell2.innerHTML  = address;
  cell3.innerHTML  = city;
  cell4.innerHTML  = age;
  cell5.innerHTML  = gender;

  row++;
});

var row = 1;


</script>

Answer 3

我将您的代码复制并粘贴到我的编辑器中进行测试。请注意两件事：

1-JavaScript 语法方面：JavaScript 是一种区分大小写的语言，如果您编写一些使用本机函数和对象的代码，则必须按照正确的语法编写代码；

2-您的方法需要纠正语法（前面提到过）并将 innerHtml 更改为 innerText 以填充表格。

下面，我添加了所有需要更改的代码：

var btn1 = document.getElementById("btn");
btn1.addEventListener("click", details);
var row = 1;

function details() {
  var name = document.getElementById("name").value;
  var address = document.getElementById("address").value;
  var city = document.getElementById("city").value;
  var age = document.getElementById("age").value;
  var gender = document.getElementById("gender").value;

  var table = document.getElementById("display");

  var newrow = table.insertRow(row);

  var cell1 = newrow.insertCell(0);
  var cell2 = newrow.insertCell(1);
  var cell3 = newrow.insertCell(2);
  var cell4 = newrow.insertCell(3);
  var cell5 = newrow.insertCell(4);

  cell1.innerText = name;
  cell2.innerText = address;
  cell3.innerText = city;
  cell4.innerText = age;
  cell5.innerText = gender;

  row++;
}

在表格中显示详细信息时出现问题

3 个答案: