JavaScript输入数字生成运算表格的问题排查与功能实现

原代码问题根因 #

• 取值属性大小写错误：JS区分大小写，你写的.Value是错误写法，正确的输入框取值属性是小写的.value，这是变量计算异常的核心原因
• 生成的<table>元素仅在内存中创建，没有插入到页面DOM树中，所以页面看不到生成结果
• 缺少输入校验逻辑和输入框禁用逻辑

修复后完整代码 #

HTML代码 #

<input type="number" id="num">
<input type="button" value="Generate a table." onclick="generate_table()">
<!-- 新增表格挂载容器 -->
<div id="tableContainer"></div>

JS代码 #

function generate_table() {
  const numInput = document.getElementById("num");
  const x = Number(numInput.value);
  // 空输入/无效输入直接终止逻辑
  if (isNaN(x)) return;

  const table = document.createElement('table');
  const y = x - 20;
  const t1 = [8, (y - 1), 3, 10];
  const t2 = [11, 2, (y + 2), 5];
  const t3 = [y, 7, 9, 4];
  const t4 = [1, 12, 6, (y + 1)];

  for (var i = 0; i < 4; i++) {
    const tr = document.createElement('tr');

    const td1 = document.createElement('td');
    const td2 = document.createElement('td');
    const td3 = document.createElement('td');
    const td4 = document.createElement('td');

    td1.appendChild(document.createTextNode(t1[i]));
    td2.appendChild(document.createTextNode(t2[i]));
    td3.appendChild(document.createTextNode(t3[i]));
    td4.appendChild(document.createTextNode(t4[i]));

    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    table.appendChild(tr);
  }

  // 清空之前生成的旧表格
  const container = document.getElementById("tableContainer");
  container.innerHTML = '';
  // 插入新表格到页面
  container.appendChild(table);
  // 禁用输入框，禁止修改
  numInput.disabled = true;
}

核心修改说明 #

• 修正了取值属性的大小写错误，同时显式将输入值转为数字类型，避免隐式类型转换导致的运算异常
• 新增输入校验逻辑，空输入/非数字输入时直接不执行表格生成逻辑
• 新增表格挂载容器，将生成的表格插入到页面可见区域，每次生成前清空旧内容避免重复渲染
• 表格生成完成后自动给输入框添加disabled属性，禁止用户修改输入值
• 把固定的数组定义移到循环外，避免循环内重复创建变量提升性能

内容的提问来源于stack exchange，提问作者Fadi Saleh