如何在document.getElementById中使用变量

Question

我已经尝试了几个小时来修复此代码。

<script language="JavaScript">
    <!--

    function generate(){
    var titels = new Array();
    var i = 0;
    for(i;i<9;i++){
    var test = 'h1-0'+ i;
        titels[i] = document.getElementById(test).textContent;
    }

    document.getElementById("uitkomst").value = titels[1];      
    }
    -->
</script>

这给我错误

TypeError: document.getElementById(...) is null
titels[i] = document.getElementById(test).textContent;

但是，当我将'h1-0'+ i更改为'h1-0'+ 5时，它确实可以工作并且没有收到错误，那么如何解决此问题？ 为什么使用变量时Javascript如此烦人？

Answer 1

添加另一个变量：

  var element;

并在循环中使用它来保持获取（或尝试获取）元素的结果：

for (i; i < 9; i++) {
  element = document.getElementById('h1-0' + i);
  if (element) {
    titles[i] = element.textContent;
  }
  else {
    console.log("Element " + i + " not found.");
  }
}

然后检查控制台以查看缺少的控制台。

Answer 2

有几种方法可以解决此问题-您可以测试缺少的对象并跳过该情况，或者可以捕获引发的异常并在异常处理程序中采取相应的措施。

这是处理代码中缺少的对象的方法：

function generate(){
    var titels = [];
    var i, item, test;
    for (i = 0; i < 9; i++) {
        test = 'h1-0'+ i;
        item = document.getElementById(test);
        if (item) {
            titels[i] = item.textContent;
        }
    }
    document.getElementById("uitkomst").value = titels[1];      
}

如果这实际上是您代码的全部工作，那么您就不需要for循环，因为您只使用数组中的[1]项即可：

function generate() {
    var item = document.getElementById("h1-01");
    if (item) {
        document.getElementById("uitkomst").value = item.textContent;
    }

}