Wie füge ich mithilfe von JavaScript, HTML oder CSS einen Wort-pro-Minute-Rechner zu einer Website hinzu? ⇐ HTML

[Anonymous]

Ich versuche schon seit einiger Zeit, eine Website für einen Tipptest auszufüllen und weiß nicht, wie ich einen Wort-pro-Minute-Zähler hinzufügen soll. Ich habe mehrere Möglichkeiten ausprobiert, aber keine davon funktioniert. Ich möchte, dass es die Wörter pro Minute angibt, nachdem der Benutzer eine Eingabeaufforderung richtig eingegeben hat.
Der Code ist unten:
HTML:

Code: Select all

repl.it



man become as
and through find would here and before







Enter

JavaScript:

Code: Select all

var input = document.getElementById("boch");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("bocho").click();
}
});

var element = document.querySelector("#boch");

element.onkeyup = function () {
var value = element.value;

if (value.includes("man")) {
document.getElementById('word-1').style.backgroundColor = 'green';
} else {
document.getElementById('word-1').style.backgroundColor = 'transparent';
}

if (value.includes("man become")) {
document.getElementById('word-2').style.backgroundColor = 'green';
} else {
document.getElementById('word-2').style.backgroundColor = 'transparent';
}

if (value.includes("man become as")) {
document.getElementById('word-3').style.backgroundColor = 'green';
} else {
document.getElementById('word-3').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and")) {
document.getElementById('word-4').style.backgroundColor = 'green';
} else {
document.getElementById('word-4').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through")) {
document.getElementById('word-5').style.backgroundColor = 'green';
} else {
document.getElementById('word-5').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through find")) {
document.getElementById('word-6').style.backgroundColor = 'green';
} else {
document.getElementById('word-6').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through find would")) {
document.getElementById('word-7').style.backgroundColor = 'green';
} else {
document.getElementById('word-7').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through find would here")) {
document.getElementById('word-8').style.backgroundColor = 'green';
} else {
document.getElementById('word-8').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through find would here and")) {
document.getElementById('word-9').style.backgroundColor = 'green';
} else {
document.getElementById('word-9').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through find would here and before")) {
document.getElementById('word-10').style.backgroundColor = 'green';
} else {
document.getElementById('word-10').style.backgroundColor = 'transparent';
}

}
let tagArr = document.getElementsByTagName("input");
for (let i = 0; i < tagArr.length; i++) {
tagArr[i].autocomplete = 'off';
}