Question

这里我试图在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是唯一的

Answer 1

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

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

同样，当您理想地获取元素时，不应传递数字而是传递字符串 -

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

Answer 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>。

您需要在临时字符串中构建html，直到它完成，然后再将其分配给tablediv.innerHTML。

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

除此之外，您应该阅读document.writeln的内容：

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

getElementById不适用于for循环中的多次迭代

2 个答案: