How can I make my website more efficient?

I have a JavaScript file on my website that takes each word and highlights them individually. Is there a way to make it into one line instead of all of the individual ones?

JavaScript:

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");

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

if (value === "m") {
start = Date.now();
}


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

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

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

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

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

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

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

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 = "red";
}

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 = "red";
}

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 = "red";
}
var end;
if (value === "man become as and through find would here and before") {
end = Date.now();
}
let millis = end - start;
if (isNaN(millis)) {
  return " ";
}
console.log(millis)

var seconds = millis / 1000;
var min = seconds / 60;

var wpm1 = ((52/5)/min)
console.log(wpm1)
var wpm = Math.round(wpm1);
console.log(wpm)
document.getElementById("bd").innerHTML = wpm;
}

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<h1>
   <span id="word-1">man</span> <span id="word-2">become</span> <span id="word-3">as</span>
   <span id="word-4">and</span> <span id="word-5">through</span> <span id="word-6">find</span> <span id="word-7">would</span> <span id="word-8">here</span> <span id="word-9">and</span> <span id="word-10">before</span>
</h1>

<input type="text" id="boch" autocomplete="off" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false">

        </div>
        <div id="typing-area">

      <button id="bocho" onclick="document.getElementById('boch').value = ''">Enter</button>

</html>

<h1 id="bd">WPM</h1>



<script src="main.js"></script>

Solution

For this solution I use only two spans, one for the green portion and one for the red text. I then loop through the text inputted by the use and find the point at which the text becomes wrong. I then move all the the text in the answer up to that point into the green span and the rest is left in the red span(this is what the slicing does). Here is the working example:

HTML:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
</head>

<h1></h1><span id="span1" style="background-color: green;"></span><span id="span2" style="background-color: red;">man become as and through find would here and before</span></h1>
<br>
<input type="text" id="boch" >

<script src="js.js"></script>
</html>

JavaScript

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

var span1 = document.getElementById("span1");
var span2 = document.getElementById("span2");

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

    var text = span1.innerText + span2.innerText;

    if (value === text) {
        span2.innerText = "";
        span1.innerText = text;
    } else {
        for (var i = 0; i < value.length; i++) {
            if (text.charAt(i) !== value.charAt(i)) {
                break;
            }
        }

        span1.innerText = text.slice(0, i);
        span2.innerText = text.slice(i, text.length);
    }
};

Or you can see it working here: https://jsfiddle.net/8des04y5/