It’s a typing speed test program.
When the user is typing correctly it should be green, when it’s finished correctly it should be blue and if none happened it should be red.
I know the problem lies in the if-statement, it works but not as intended.
At first, it has no color, with the very first input it gets red and stays red, and when the input field (text area) is cleaned, it gets green and never gets blue no matter what.
const inputArea = document.querySelector("#input-area");
const originText = document.querySelector("#example-text p").innerHTML;
var inputEmpty = true;
var interval;
function Start() {
let inputTextLength = inputArea.value.length;
if (inputTextLength == 0 && inputEmpty) {
interval = setInterval(runTimer, 100);
inputEmpty = false;
}
}
function spellCheck() {
let enteredText = inputArea.value;
let originTextMatch = originText.substring(0, enteredText.length);
if (enteredText == originText) {
inputArea.style.boxShadow = "5px 5px blue";
clearInterval(interval);
} else if (enteredText == originTextMatch) {
inputArea.style.boxShadow = "5px 5px green";
} else {
inputArea.style.boxShadow = "5px 5px red";
}
}
inputArea.addEventListener("keypress", Start);
inputArea.addEventListener("keyup", spellCheck);<div id="example-text">
<h2>header</h2>
<p>This is an example text</p>
</div>
<textarea id="input-area" name="text-area"></textarea>
New contributor
newbie is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.