How can I create a table using the input element?

[Biwo]

Hey there,

I've just started learning javascript, so I excuse for an eventually stupid question in advance.
I want to create a programme, where users can create their own knitting-patterns.
Therefore, in my html-Document I created a form as follows:

<form>
<label for="h-stitches">Horizontal Stitches:</label>
<input type="number" min="0" id="h-stitches" name="h-stitches"><br><br>
<label for="v-stitches">Vertical Stitches:</label>
<input type="number" min="0" id="v-stitches" name="v-stitches"><br><br>
</form>


In Javascript, I started like this:


document.getElementById("v-stitches").addEventListener("change", function () {
let row = document.getElementById("h-stitches").value;
let col = document.getElementById("v-stitches").value;
let table = document.createElement('table');
for(let i=0; i<row; i++) {
let tr = document.createElement('tr');
for(let j=0; j<col; j++) {
let td = document.createElement('td');
td.innerHTML = " ";
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("Pattern-Table").appendChild(table);
});


This doesn't work and so far I haven't found the answer yet.
If there's anybody out there who can help me, I would be really glad.

Thank you so much.

Biwo

 

[MeMate]

I don't see issues on ur code. Does the element "Pattern-Table" exists?

PLUS add something to your tablefields to see if they'll be created.

E.g.
td.innerHTML = "-";