let $table = document.createElement('table');

function rerenderColor(e, color) {
    Array.from($table.children).map(item => {
        Array.from(item.children).filter(item => item.cellIndex === e.target.cellIndex).map(item => item.style.backgroundColor = color)
    })
}

for(let i = 1; i < 10; i++) {
    let $tr = document.createElement('tr')

    for(let j = 1; j < 10; j++) {
        // $td.addEventListener('mouseover', (e) => rerenderColor(e, 'blue'))
        // $td.addEventListener('mouseout', (e) => rerenderColor(e, 'transparent'))
        let $td = document.createElement('td')
        $td.innerText = String(j * i)

        $td.addEventListener('mouseover', (e) => {
            rerenderColor(e, 'red')

            $td.style.backgroundColor = 'green'
        })
        $td.addEventListener('mouseout', (e) => rerenderColor(e, 'transparent'))
        $tr.appendChild($td)
    }
    $table.appendChild($tr)
}
document.body.appendChild($table)

const $n1 = document.querySelector('#n1')
const $n2 = document.querySelector('#n2')
const $calcBtn = document.querySelector('#calcBtn')
const $result = document.querySelector('#result')

const calcSum = () => {
    return $result.innerText = String(+$n1.value + +$n2.value)
}

$calcBtn.addEventListener( 'click',  () => {
    calcSum()
})
$n1.onchange = calcSum()
$n2.onchange = calcSum()
$calcBtn.onclick = calcSum()