<div id="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aperiam commodi
consequatur corporis cum dolores eaque in labore molestias nam odio optio quas, quis voluptates!
Architecto fuga impedit voluptatum.
</div>
<form action="" id="form">
<input type="text" id="text_input" onkeydown="getChar(this);">
</form>
var arr = [];
var i = 0;
window.onload = function () {
var text = document.getElementById("text");
txt = text.textContent || text.innerText;
arr = txt.split(' ');
console.log(arr);
//alert(txt.substring(0,3));
};
function getChar(e) {
if (event.which == 32) {
if (e.value == arr[i]){
i++;
document.getElementById('form').reset();
event.preventDefault();
}
}
}
const dGet = document.getElementById.bind(document);
const reSpace = /\s+/;
const div = dGet('text');
const text = div.innerText;
const words = text.trim().split(reSpace);
dGet('text_input').addEventListener('input', function(e){
var i, myWords = e.target.value.trim().split(reSpace),
theWords = words.slice();
var toCheck = e.target.value.substr(-1) === ' ';
if(!toCheck) myWords.length--;
for(i=0; i<Math.min(myWords.length, words.length); i++) {
if(words[i] !== myWords[i]) {
theWords[i] = '<i>' + words[i] + '</i>';
} else {
theWords[i] = '<b>' + words[i] + '</b>';
}
}
div.innerHTML = theWords.join(' ');
});
if (e.value == arr[i]){
i++;
document.getElementById('form').reset();
event.preventDefault();
}
Эта строчка срабатывает, когда слово вводиться верно и оно пропадает с инпута при этом условии, если был нажат пробел, нужно что бы еще слово в диве после правильного ввода окрашивалось в зеленый цвет, так же при ошибке, слово становилось красным
нужно что бы еще слово в диве после правильного ввода окрашивалось в зеленый цвет, так же при ошибке, слово становилось красным
if (e.value == arr[i]){
$("#text").style.background = "green";
i++;
document.getElementById('form').reset();
event.preventDefault();
} else $("#text").style.background = "red"