<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body onload="myFunction()">
<script>
var counterSymbol = 0;
function myFunction() {
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "myInput");
input.setAttribute("value", "кошка");
document.body.appendChild(input);
document.getElementById("myInput").style.fontSize = "25px";
var br = document.createElement("BR");
document.body.appendChild(br);
var input2 = document.createElement("input");
input2.setAttribute("type", "text");
input2.setAttribute("id", "myInput2");
document.body.appendChild(input2);
document.getElementById("myInput2").style.fontSize = "25px";
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);
document.getElementById("myTable").style.fontSize = "40px";
var y = document.createElement("TR");
y.setAttribute("id", "myTr");
y.setAttribute("fontSize", "10px");
document.getElementById("myTable").appendChild(y);
let arr_ru = ['а', 'б', 'в', 'г', 'д', 'е', 'ё', 'ж', 'з', 'и', 'й', 'к', 'л', 'м', 'н', 'о', 'п', 'р', 'с', 'т', 'у', 'ф', 'х', 'ц', 'ч', 'ш', 'щ', 'ь', 'ы', 'ъ', 'э', 'ю', 'я'];
for (var index = 0;index<33;index++)
{
var z = document.createElement("TD");
var t = document.createTextNode(arr_ru[index]);
z.appendChild(t);
document.getElementById("myTr").appendChild(z);
}
var br = document.createElement("BR");
document.body.appendChild(br);
var btn = document.createElement("BUTTON");
btn.innerHTML = "ПРОВЕРИТЬ";
document.body.appendChild(btn);
btn.onclick =function(){
document.getElementById("myInput").innerHTML += " ";
}
document.getElementById("myTr").onmouseover = function(event) {
let target = event.target;
target.style.background = 'pink';
};
document.getElementById("myTr").onmouseout = function(event) {
let target = event.target;
target.style.background = '';
};
document.getElementById("myTr").onclick = function(event) {
let target = event.target;
target.style.background = 'red';
let text = document.getElementById("myInput").value;
if (text[counterSymbol] == target.innerHTML){
document.getElementById("myInput2").value += target.innerHTML;
counterSymbol++;
}
else
{
alert("Выбери правильную букву");
}
};
document.onkeypress = function(event){
var symbol = String.fromCharCode(event.keyCode);
document.getElementById("myInput2").value += symbol;
document.getElementById("myInput2").blur();
};
}
</script>
</body>
</html>
| 