<!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="number1" />
<input type="number" id="number2" />
<button id="calc">Посчитать</button>
<input type="text" name="" id="result" />
</div>
<script>
// -------------------Таблица умножения, Подсветить ячейку, Подсветить строку и столбец
let table = document.createElement("table");
document.body.append(table);
for (let i = 1; i < 10; i++) {
let tr = document.createElement("tr");
table.append(tr);
tr.style.border = "1px solid black";
for (let a = 1; a < 10; a++) {
let td = document.createElement("td");
tr.append(td);
td.innerText = i * a;
td.style.border = "2px solid black";
td.style.padding = "10px";
td.style.margin = "0px";
}
}
let tdarr = document.querySelectorAll("td");
tdarr.forEach(
(tdOn) =>
(tdOn.onmousemove = function () {
this.style.backgroundColor = "cyan";
this.parentElement.style.backgroundColor = "cyan";
let index = this.cellIndex;
let column = document.querySelectorAll("tr");
column.forEach(
(columns) =>
(columns.children[index].style.backgroundColor =
"cyan")
);
})
);
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("number1");
let number2 = document.getElementById("number2");
calc.onclick = function () {
alert(+number1.value + +number2.value);
};
// ------------------------ Calc Live
function calc() {
result.value = +number1.value + +number2.value;
}
number1.oninput = calc;
number2.oninput = calc;
</script>
</body>
</html>