如何基于用户输入的计算结果填充网页表格字段 附相关代码示例

修正方案 #

你代码的核心问题出在DOM元素赋值逻辑和变量定义上，修改后就能正常将计算结果填充到表格对应位置：

存在的问题

• 普通文本标签<span>没有value属性，修改内容必须使用textContent属性
• 已计算的输入长度inputLen未被使用，代码中引用的GC_Content变量未定义
• 缺少对应数值的计算逻辑，也没有给第二个表格结果单元格赋值的相关代码

修正后的JS代码

function countbase() {
  // 读取输入内容，去除首尾空白字符避免干扰计算
  const inputContent = document.getElementById('sequence').value.trim();
  // 计算输入内容长度
  const contentLength = inputContent.length;
  // 这里是GC含量计算逻辑，如果你需要统计单词数，替换这段逻辑即可
  let gcCount = 0;
  for(let i = 0; i < inputContent.length; i++) {
    const char = inputContent[i].toUpperCase();
    if(char === 'G' || char === 'C') {
      gcCount++;
    }
  }
  // GC占比保留两位小数，单词计数可替换为：contentLength === 0 ? 0 : inputContent.split(/\s+/).length
  const GC_Content = contentLength === 0 ? 0 : (gcCount / contentLength * 100).toFixed(2) + '%';

  // 赋值到表格对应字段
  document.getElementById('bcount').textContent = contentLength;
  document.getElementById('GC').textContent = GC_Content;
}

你原有的CSS和HTML代码不需要修改，直接替换JS部分即可运行。点击Check按钮后，内容长度会自动填充到第一行结果列，GC占比会填充到第二行结果列。如果你的需求是统计单词数，只需要把GC含量的计算逻辑替换为单词计数逻辑即可。

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