CODEWITHSUNDEEP
javascripthtml
Sabari Govindarajan
Sabari Govindarajan

Reputation: 101

getElementById doesn't work for more than one iteration in for loop

Here i'm trying to construct tables dynamically in javascript with number of textfields and trying to use that values in javascript for calculation

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 Here in javascript document i'm getting the div element by it's id and using innerhtml created tables depending on the user's input,but when i wanted to get the values in input fields inside table i.e getElementById inside the for loops of calculateCGPA function returns null after the first iteration

// 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);

and my id for input tag is unique

Upvotes: 1

Views: 128

Answers (2)

Ashvin777
Ashvin777

Reputation: 1482

There is big problem in your code. That is whenever you do document.writeln(elem); It instantly replace the whole document HTML code with your elem so at that moment all your ids are lost of previous page. So why the next loop execution it will not be able to fetch the id="2" element any more.

Keep on pushing those datas in an array in your for loop and then once for loop is over do this document.write(arr).

Also when you fetch the element ideally you should not pass a number instead pass a string -

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

Upvotes: 1

t.niese
t.niese

Reputation: 40882

You cannot use innerHTML to concat partial html code, because the DOM hat to be valid at any time.

So your: 

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

would be the same as writing:

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

Because the browser would add the missing </tbody></table> automatically.

You have to build html in a temporary string until it is complete before you assign it to tablediv.innerHTML.

You first have to fix the creation of you html code before you start to search for other errors.

Beside that you should read about what document.writeln does:

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.

Upvotes: 0

Related Questions