@kikosko

Как выделить слово с цветом?

Подскажите как выделить слово красным в «div», после нажатия пробела, если оно неправильно введено с input или зеленый, если правильно ?
<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();
        }
    }
}
  • Вопрос задан
  • 376 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Вместо клавишных событий можно слушать событие input – когда значение меняется.

Две строки – образец и введённый текст – бить на слова по пробелам. Если последний введённый символ не пробел, то последнее введенное слово проверять пока рано. Несовпавшее слово заменяется на обёрнутое в тег.

примерно так
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(' ');
});
Fiddle
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
kinglostov
@kinglostov
просто lostov

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"
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы