getElementById 不能在 for 循环中进行多次迭代答案

【问题标题】：getElementById doesn't work for more than one iteration in for loopgetElementById 不能在 for 循环中进行多次迭代
【发布时间】：2017-08-13 13:01:11
【问题描述】：

在这里，我尝试在 javascript 中动态构建具有多个文本字段的表格，并尝试在 javascript 中使用该值进行计算

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CGPA Calculator</title>
<script type="text/javascript" src="test.js">
</script>

<style type="text/css">
div{
    background-color:orange;
    border-style:solid;
    padding:50px;
}
button{
    font-size:30px;
    background-color:white;
    border:none;
}
table{
margin:auto;
font-size:25px; 
}
input{
    margin-left:40px;
    font-size:25px;
}
</style>
</head>

<body>
<div id="myTable"></div>

</body>
</html>

Javascript 在javascript文档中，我通过它的id获取div元素并使用innerhtml根据用户的输入创建表，但是当我想获取表内输入字段中的值时，即在calculateCGPA函数的for循环中的getElementById返回null之后第一次迭代

// JavaScript Document
function calculateCGPA(no_sem)
{
    var credits = new Array(no_sem+1);
    var grade = new Array(no_sem+1);

    for(var n=1;n<=no_sem;n++)
    {
        credits[n] = new Array(7);
        grade[n]= new Array(7);
    }
    var count=parseInt(1);
    for(var i=1;i<=no_sem;i++)
    {
        for(var j=1;j<=6;j++)
        {
        var elem = document.getElementById(count);
        document.writeln(elem);
        count++;
        }

    }

}
function start()
{
    var no_sem = parseInt(window.prompt("Enter the number of semester "));
    var tablediv = document.getElementById('myTable');

    if(no_sem>=1 && no_sem<=8)
    {
        var count = parseInt(1);
    for(var i=1;i<=no_sem;i++)
    {

        tablediv.innerHTML = tablediv.innerHTML+ "<table border =0><tbody><caption>Semester " + i + "</caption>";
        for(var j=1;j<=6;j++)
        {
            tablediv.innerHTML = tablediv.innerHTML + "<tr><td>Subject "+j+"</td><td></td><td><input id="+count+" type='text' maxlength=5 size=5></td></tr><br><br>";
            count = count+1;
        }
        tablediv.innerHTML = tablediv.innerHTML + "</tbody></table>";
    }
    tablediv.innerHTML = tablediv.innerHTML + "<table><tr><td><button id = 'button' onclick = 'calculateCGPA("+no_sem+")'>Submit</button></td></tr></table><br><br>";   
    }
    else
    {
        window.alert("Please enter a number between 1 and 8");  
    }
}
window.addEventListener("load",start,false);

而且我输入标签的 id 是唯一的

【问题讨论】：

为什么不使用 document.querySelectorAll
对不起，我刚开始学习javascript，我对方法不熟悉..你能告诉我上面的代码有什么问题
你能制作小提琴或codepen吗？
jsfiddle.net/ybwaspo3

标签： javascript html

【解决方案1】：

您的代码存在大问题。那就是每当您执行 document.writeln(elem); 时，它会立即用您的 elem 替换整个文档 HTML 代码，因此此时您的所有 id 都将丢失前一页。那么为什么下一个循环执行它将无法再获取 id="2" 元素。

继续在 for 循环中将这些数据推送到数组中，然后在 for 循环结束后执行此操作document.write(arr)。

此外，理想情况下，当您获取元素时，您不应传递数字而是传递字符串 -

var elem = document.getElementById(count.toString());

【讨论】：

太棒了。也许您可以投票并勾选答案；）

【解决方案2】：

您不能使用innerHTML 连接部分 html 代码，因为 DOM 帽子在任何时候都有效。

所以你的：

tablediv.innerHTML = tablediv.innerHTML
                       + "<table border =0><tbody><caption>Semester " 
                       + i + "</caption>";

和写作一样：

tablediv.innerHTML = tablediv.innerHTML
                       + "<table border =0><tbody><caption>Semester " 
                       + i + "</caption></tbody></table>";

因为浏览器会自动添加缺少的</tbody></table>。

在将其分配给tablediv.innerHTML之前，您必须在临时字符串中构建html。

在开始搜索其他错误之前，您首先必须修复 html 代码的创建。

除此之外，您还应该了解 document.writeln 的作用：

注意：当 document.write 写入文档流时，在关闭（加载）的文档上调用 document.write 会自动调用 document.open，这将清除文档。

【讨论】：