aleks330,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.coll {
border: 2px red solid;
}
.sadm:after {
content: attr(data-txt);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let jes = [{
"inglih": "father",
"rus": "отец"
},
{
"inglih": "boy",
"rus": "мальчик"
},
];
let inp = document.querySelector("#iin");
let word = document.querySelector(".word");
let aut = document.querySelector(".aut")
let batt = document.querySelector(".sadm");
let b = -1;
function more() {
b = ++b % jes.length;
let ru = jes[b].rus;
word.innerHTML = `${ru}`;
aut.innerHTML = '';
batt.dataset.txt = "Go"
}
more();
batt.addEventListener("click", function() {
let res = inp.value;
let wo = jes[b].inglih;
if (batt.dataset.txt === "More") more();
else if (res === wo) {
aut.classList.remove("coll");
batt.dataset.txt = "More";
aut.innerHTML = `Молодец!Все правильно`;
} else {
aut.classList.add("coll")
aut.innerHTML = `Не верно,попробуй еще`;
};
})
});
</script>
</head>
<body>
<div class="hed">
<h1>Тренажер</h1>
<h2>для изучения английских слов.</h2>
</div>
<div class="wrap">
<div class="flexss">
<h1 class="word"></h1>
<input class="in" type="text" placeholder="перевод" name="answer" id="iin">
<button class="sadm" data-txt="Go"></button>
</div>
<h1 class="aut "></h1>
</div>
</body>
</html>