无法将输入数据从 HTML 表格单元格保存到 JavaScript 变量中

Question

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" >
        <tr>
            <th style="background: white;">EDUCATION</th>
            <th style="background: white;">INSTITUTE</th>
            <th style="background: white;">PERCENTAGE</th>
        </tr>
        <tr>
            <td style="color: white;">10 th</td>
            <td id="10inst"><input type="text"></td>
            <td  id="10per"><input type="text"></td>
        </tr>
        <tr>
            <td style="color: white;" >12 th</td>
            <td  id="12inst"><input type="text"></td>
            <td  id="12per"><input type="text"></td>
        </tr>
        <tr>
            <td style="color: white;">Graduaction</td>
            <td  id="gradinst"><input type="text"></td>
            <td  id="gradper"><input type="text"></td>           
        </tr>
        <tr>
            <td style="color: white;">Masters</td>
            <td id="masterinst"><input type="text"></td>
            <td id="masterper"><input type="text"></td>           
        </tr>

    </table><br><br>

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;

Answer 1

There might be 2 problems in your code:

1. Make sure you run your JavaScript only after you enter text in the input elements.

2. You have <input> element inside <td> element. It means that when you getElementById of the <td> - you are not yet referencing the '' element. And the .value of '' is really undefined. So to fix that:

   instead of

var inst12 = document.getElementById("12inst").value;

do:

var inst12 = document.getElementById("12inst").childNodes[0].value;

Full working example: https://jsfiddle.net/1dpg5j3q/

Answer 2

You must be add "id" attribute in input elements, not td elements or table elements

Like this;

<input id="12inst" type="text">