<!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);
var br2 = document.createElement("BR");
document.body.appendChild(br2);
var input3 = document.createElement("input");
input3.setAttribute("type", "text");
input3.setAttribute("id", "myInput3");
document.body.appendChild(input3);
document.getElementById("myInput3").style.fontSize = "25px";
document.getElementById("myInput3").value="слово не собрано";
btn.onclick =function(){
document.getElementById("myInput3").value="слово не собрано";
document.getElementById("myInput2").value = "";
let fruits = ["яблоко", "апельсин", "слива","абрикос","ананас","виноград","арбуз"];
let rnumber = Math.floor(Math.random() * Math.floor(fruits.length));
document.getElementById("myInput").value = fruits[rnumber];
}
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("Выбери правильную букву");
}
let word1 = document.getElementById("myInput").value;
let word2 = document.getElementById("myInput2").value;
if (word1 == word2){
document.getElementById("myInput3").value="слово собрано";
counterSymbol = 0;
}
};
}
</script>
</body>
</html>
| 