How can I make my website more efficient?
Question
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>
2 answers
solution1
0 2021-01-24 13:55:21
I would say that the first tip is to store your code blocks, which you are using in multiple places, in variables. This is the DRY principle, don't repeat yourself. like for example:
if (value.includes("man")) {
document.getElementById('word-1').style.backgroundColor = 'green';
} else {
document.getElementById('word-1').style.backgroundColor = "red";
}
and use this variable to replace the same code:
const word1 = document.getElementById('word-1');
if (value.includes("man")) {
word1.style.backgroundColor = 'green';
} else {
word1.style.backgroundColor = "red";
}
Do this for every code that you will use multiple time. This of course is just an example, you can do it even better, because you have much code that is repeating.
solution2
0 ACCPTED 2021-01-24 18:34:05
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.