在这里,我正在尝试使用具有多个文本字段的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>


Java脚本
在这里,在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.writeln(elem);时,它将立即用您的elem替换整个文档HTML代码,因此,此时所有您的ID都将丢失上一页。因此,为什么要执行下一个循环,它将不再能够获取id =“ 2”元素。

继续将这些数据推入for循环中的数组中,然后在for循环结束后执行此document.write(arr)

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

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

10-07 14:11
查看更多