I created a simple code but it doesn’t work and I can’t figure why. Any help is greatly appreciated.
The code is supposed to create a dynamic table with the number of rows and columns taken from the user’s input and populate it with the simple algorithm. Each row should look like that: 1.1 1.2 1.3 … 1.5 where the increment is happening only after the decimal point so the second row would look like that: 2.1 2.2 2.3 … 2.5
HTML:
`<form>
<fieldset>
<label for=”nRows”>
Select number of rows:
</label>
<select id=”rows” name=”rows” tabindex=”1″>
<option value=”01″>01</option>
<option value=”02″>02</option>
<option value=”03″>03</option>
<option value=”04″>04</option>
<option value=”05″>05</option>
</select>
<label for=”nColumns”>
Select number of columns:
</label>
<select id=”columns” name=”columns” tabindex=”3″>
<option value=”01″>01</option>
<option value=”02″>02</option>
<option value=”03″>03</option>
<option value=”04″>04</option>
<option value=”05″>05</option>
</select>
</fieldset>
<input id=”submit” name=”Submit1″ tabindex=”5″ type=”submit” value=”Create Table” >
<input id=”reset” name=”Reset1″ tabindex=”7″ type=”reset” value=”Clear values”>
<script src=”Myscript.js”></script>
`
And the JavaScript to go with it:
`function createTable() {
var table = ”;
var r;
var c;
var incr = c * 0.1;
var rowN = parseInt(document.getElementById(“rows”).value);
var colN = parseInt(document.getElementById(“columns”).value);
for (r = 1; r <= rowN; r++) {
table += ‘<tr>’;
for (c = 1; c <= colN; c++) {
table += ‘<td>’ + (c + incr) + ‘</td>’;
}
table += ‘</tr>’;
}
document.getElementByID(‘table’).innerHTML = ‘<table border=1 >’ + table + ‘</table>’;
}
document.getElementById(“submit”).addEventListener(“onclick”, createTable, false);