Как отделить функцию рендера таблицы от обработчика событий

Question

Есть код, первоначально создаёт форму для создания таблицы, с двумя полями (ширина, высота). После создания самой таблицы, при нажатии на клетку (td) в алерт выводятся координаты этой ячейки. Вопрос в следующем - как отделить обработчик событий, описанный перед этим, от функции рендера таблицы?

function createTableForm() {
    let div_table = document.createElement('div');
    div_table.className = 'table_div';
    let addDiv = document.querySelector("div.divAdd");
    addDiv.appendChild(div_table);

    let h1 = document.createElement("h1");
    h1.innerText = "Table creation";
    div_table.appendChild(h1);

    let p_width = document.createElement("p");
    p_width.innerText = "Table width:";
    div_table.appendChild(p_width);

    let width_input = document.createElement("input");
    width_input.type = "text";
    width_input.id = "width";
    div_table.appendChild(width_input);

    let p_height = document.createElement("p");
    p_height.innerText = "Table height:";
    div_table.appendChild(p_height);

    let height_input = document.createElement("input");
    height_input.type = "text";
    height_input.id = "height";
    div_table.appendChild(height_input);

    let btn_crt_table = document.createElement("button");
    btn_crt_table.innerText = "Create Table";
    div_table.appendChild(btn_crt_table);
    btn_crt_table.addEventListener('click', (event) => {
        drawTable(width_input.value, height_input.value);
    });

    let sect = document.createElement('section');
    sect.id = "section";
    div_table.appendChild(sect);
}

function drawTable(width, height) {
    let myTableDiv = document.getElementById("section");
    let table = document.createElement('table');
    table.className = "table";
    table.id = 'tableId';
    let tableBody = document.createElement('tbody');
    table.appendChild(tableBody);
    let section = document.getElementById("section");
    section.append(table);
    if (document.getElementById("tableId")) {
        document.getElementById("tableId").remove();
    }
    for (let i = 0; i < height; i++) {
        let tr = document.createElement('tr');
        tableBody.appendChild(tr);
        for (let j = 0; j < width; j++) {
            let td = document.createElement('td');
            if (height < 1 || width < 1 || height > 15 || width > 15 || !height || !width) {
                td.textContent = "Width and height value must be an integer between 1 and 15!";
                width = 1;
                height = 1;
            }
            tr.appendChild(td);
        }
        tableBody.append(tr);
    }
    // myTableDiv.appendChild(table).onclick = function (e) {
    //     if (e.target.tagName !== 'TD') return;
    //     alert(`Позиция: ${e.target.cellIndex + 1} в ряду: ${e.target.closest('tr').rowIndex + 1}`);
    // };
   
    
    myTableDiv.appendChild(table);
    myTableDiv.addEventListener('click', (event) => {
        if (event.target.tagName !== 'TD') return;
        alert(`Позиция: ${event.target.cellIndex + 1} в ряду: ${event.target.closest('tr').rowIndex + 1}`);
    });
}

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>FRONT-END LAB</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <button onclick="createTableForm()">table</button>
    <div class="divAdd"></div>
</body>

БЛОГ НА HUSL

Как отделить функцию рендера таблицы от обработчика событий

Ответы (0 шт):