JavaScript报错：Cannot read property 'value' of null及跨函数获取id为'nilai'的值问题

1. 搞定JavaScript错误：Cannot read property 'value' of null #

这个错误说白了就是：你想拿一个叫nilai的元素的value，但浏览器根本找不到这个元素，返回了null，你硬要访问它的属性，就炸了。

常见的坑和解决办法：

• 代码跑得太早，DOM还没准备好：如果你的JS写在页面顶部（比如<head>里），这时候浏览器还没渲染出nilai元素，肯定拿不到。要么把JS脚本挪到<body>最末尾，要么等DOM加载完再执行：

  window.addEventListener('DOMContentLoaded', function() {
    // 这里再写获取元素的代码就稳了
    const nilaiEl = document.getElementById('nilai');
    if (nilaiEl) {
      console.log(nilaiEl.value);
    }
  });
  

• id写错了：仔细检查HTML里的元素id是不是真的是nilai，id是大小写敏感的，Nilai和nilai完全是两个东西。
• 动态元素还没生成：看你给的后端代码，你是用Node.js查数据库后动态生成表格。如果nilai元素是在这个表格里，那得等表格渲染到页面上之后再去获取，不然肯定是null。
• 重复id踩坑：要是你表格每行都生成一个id为nilai的元素，这就违反HTML规则了（id必须唯一），getElementById只会返回第一个，后面的根本拿不到。这种情况改class或者给每个元素加唯一id，比如：

  // 后端生成HTML的时候改成这样
  html += '<td><input type="text" class="nilai-input" id="nilai-' + row.nis + '" /></td>';
  

  这样前端就能精准定位到每个输入框了。

2. 在其他函数里获取nilai元素的值 #

解决了上面的问题，这个就简单了，核心是先确保元素存在：

如果是唯一的nilai元素 #

// 先写个工具函数拿值
function getNilaiValue() {
  const nilaiEl = document.getElementById('nilai');
  // 先判断元素有没有，避免再报错
  if (!nilaiEl) {
    console.error('找不到id为nilai的元素哦');
    return null;
  }
  return nilaiEl.value;
}

// 在其他函数里直接调用就行
function anotherFunction() {
  const nilai = getNilaiValue();
  if (nilai !== null) {
    // 这里做你要的操作
    console.log('拿到的nilai值：', nilai);
  }
}

如果是表格里的多个nilai输入框 #

要是每行都有一个，用class批量拿或者通过唯一id定位：

// 拿所有输入框的值
function getAllNilaiValues() {
  const nilaiInputs = document.querySelectorAll('.nilai-input');
  // 转成数组收集所有值
  const values = Array.from(nilaiInputs).map(input => input.value);
  return values;
}

// 拿指定nis行的输入框值
function getNilaiByNis(nis) {
  const nilaiEl = document.getElementById(`nilai-${nis}`);
  return nilaiEl ? nilaiEl.value : null;
}

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