Pika
/
homework


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="number" id="numberOne">
        <input type="number" id="numberTwo">
        <button id="calc">Рассчитать</button>
        <input type="text" value=" " id="result">
    </div>
    <script>
        //Таблица умножения
        const table = document.createElement('table');
        document.body.append(table);

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

            for (let a = 1; a < 10; a++) {
                let td = document.createElement("td");
                tr.append(td);
                td.innerText = i * a;
                td.style.border = "1px solid black";
            }
        }

        //Подсветить ячейку
        // let tdarr = [...table.querySelectorAll('td')]
        // tdarr.forEach(tdOn => tdOn.onmousemove = function () {
        //     this.style.backgroundColor = "green"


        // })
        // tdarr.forEach(tdOut => tdOut.onmouseout = function () {
        //     this.style.backgroundColor = "transparent"
        //     this.parentElement.style.backgroundColor = "transparent"
        // })

        //Подсветить строку и столбец,
        let tdarr = document.querySelectorAll('td')
        tdarr.forEach(tdOn => tdOn.onmousemove = function () {
            this.style.backgroundColor = "green"
            this.parentElement.style.backgroundColor = "green"
            let index = this.cellIndex;
            let column = document.querySelectorAll("tr")
            column.forEach((columns) => columns.children[index].style.backgroundColor = "green");
        })
        tdarr.forEach(tdOut => tdOut.onmouseout = function () {
            this.style.backgroundColor = "transparent"
            this.parentElement.style.backgroundColor = "transparent"
            let index = this.cellIndex;
            let column = document.querySelectorAll("tr")
            column.forEach((columns) => columns.children[index].style.backgroundColor = "transparent");

        })


        //calc
        // let number1 = document.getElementById("numberOne")
        // let number2 = document.getElementById("numberTwo")
        // calc.onclick = function(){
        //     result.value = ((+numberOne.value) + (+numberTwo.value))
        // }


        // Calc live
        function calc() {
            result.value = ((+numberOne.value) + (+numberTwo.value))
        }
        numberOne.oninput = calc
        numberTwo.oninput = calc


    </script>
</body>

</html>