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