Почему не создается таблица?

Question

[Andriy022]

<form action="" name="first">
    <input type="number" id="width" name="width"><label for="width">Кількість рядків</label>
    <input type="number" id="height" name="height"><label for="height">Кількість стовбців</label>
    <input type="text" id="text" name="text"> <label for="text">Напис в таблиці</label>
    <button id="button">створення таблиці</button>
</form>
<div></div>

let button = document.getElementById('button')
let width = document.first.width.value;
let height = document.first.height.value;
let text = document.first.text.value;
let arr = (width, height, text) => {

    let list = `<table>`
    for (let i = 0; i < width; i++) {
        list += `<tr></tr>`;
        for (let j = 0; j < height; j++) {
            list += `<td>${text}</td>`
        }
    }
    list += `</table>`
    document.body.append(list)
}

button.addEventListener('click', function (e) {
    e.preventDefault()

    arr(width, height, text)
})

Comments

[Алексей Дубровин]

С чего вы взяли что она не создаётся ?

[Ankhena]

1. вы вставили текст
https://developer.mozilla.org/ru/docs/Web/API/Elem...
2. разберитесь кто такие width, height и их length
3. пытаетесь получить значения инпутов при загрузке (они пустые)
4. td не попадают в tr

Answer 1

[Everybody_Lies]

1. Вы не правильно обращаетесь к элементам. Используйте querySelector, querySelectorAll, getElementById
2. Определяйте переменные не в начале программы, а в момент нажатия кнопки, потому что при инициализации они будут пустыми.
3. Для того, чтобы строку преобразовать в node и вставить в DOM дерево, используйте не append, а insertAdjacentHTML
4. Внутри тега tr, должны находиться td'шки, а у вас он сразу же закрывается. Поэтому tr нужно открывать перед вложенным циклом, а закрывать после него.

в итоге выглядеть это будет примерно так

https://jsfiddle.net/ymkpLuzr/