Unable to save input data from HTML table cells into JavaScript variables

I have tried to put input from a user into cells of a table, which was created using HTML and to save that data into a variable of JavaScript.

I was trying to get the data from rows cell of table to JavaScript variables one by one, but I’m getting undefined in place of data when alerting the data after summit.

HTML code

 <table border = "2" cellpadding = "6" cellspacing = "6" bordercolor = "white" bgcolor = "red" class="center" id="mytable" >
            <th style="background: white;">EDUCATION</th>
            <th style="background: white;">INSTITUTE</th>
            <th style="background: white;">PERCENTAGE</th>
            <td style="color: white;">10 th</td>
            <td id="10inst"><input type="text"></td>
            <td  id="10per"><input type="text"></td>
            <td style="color: white;" >12 th</td>
            <td  id="12inst"><input type="text"></td>
            <td  id="12per"><input type="text"></td>
            <td style="color: white;">Graduaction</td>
            <td  id="gradinst"><input type="text"></td>
            <td  id="gradper"><input type="text"></td>           
            <td style="color: white;">Masters</td>
            <td id="masterinst"><input type="text"></td>
            <td id="masterper"><input type="text"></td>           


JavaScript code

var inst10 = document.getElementById("mytable").value;
var inst12 = document.getElementById("12inst").value;
var masterinst = document.getElementById("masterinst").value;
var per10 = document.getElementById("10per").value;
var per12 = document.getElementById("12per").value;
var masterper = document.getElementById("masterper").value;
var gradinst=document.getElementById("gradinst").value;
var gradper=document.getElementById("gradper").value;

64 thoughts on “Unable to save input data from HTML table cells into JavaScript variables”