Функция помощи

ninzeanh99

Привет

Я хотел бы сопоставить последний символ поля ввода с символом в том же месте в выводе слова в HTML.

Если он соответствует, ничего не делайте, а если он не соответствует, выделите его красным, чтобы пользователь знал, что он допустил несоответствие типа. Я успешно обнаружил неправильный символ и сумел сделать его красным.

Но затем начинаются проблемы.

Он печатает всю эту ерунду, и я не уверен, в чем проблема. Код ниже:

 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">


<style>


.red{color:red;}


</style>


</head><body>


<!-- HTML -->


<p id="word-output">Hello World!</p>


<input id="input">


<script>


//Replace method


String.prototype.replaceAt=


function(index,char){


var a=this.split("");


a[index] = char;


return a.join("");


};


//DOM


var input = document.querySelector("#input");


var word_output = document.querySelector("#word-output");


var str = "Hello World!";


word_output.innerHTML = str;


//Compare the last input letter to the same position as the word output letter


input.addEventListener('input', ()=>{


if(


input.value.charAt(input.value.length-1)===


word_output.innerHTML.charAt(input.value.length-1)


)


{


console.log(true);


}


else if(


input.value.charAt(input.value.length-1)!==


word_output.innerHTML.charAt(input.value.length-1)


)


{


replaceChar();


};


function replaceChar(){


word_output.innerHTML =


word_output.innerHTML.replaceAt(input.value.length-1, '<span class="red">' + str.charAt(input.value.length-1) + '</span>');


};


});


</script>


</body></hmtl>

HTML: Мы будем очень признательны за любую помощь или понимание.

RacerBusiness

В таком простом сравнении, как у вас, истинное или ложное, все, что вам нужно, это ИНАЧЕ. И если это работает правильно, то следующим шагом будет поиск исходной проблемы, поскольку она вроде бы не зависит от этого кода.

Рома Луговских

Мне удалось привести код в порядок и сопоставить входной символ с символом HTML, символ за символом работает и в консоли отображается как true или false.

True для совпадения и false для пропущенного совпадения. Теперь мне просто нужно придумать, как заменить несоответствие в HTML в этой позиции.

Это позиция input.value.length-1, так как мне нужно будет заменить ее точно таким же символом, но обернуть ее в диапазон с классом, чтобы изменить цвет.

 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">


<style>


.red{color:red;}


</style>


</head><body>


<!-- HTML -->


<p id="word-output">Hello World!</p>


<input id="input">


<script>


//DOM


var input = document.querySelector("#input");


var word_output = document.querySelector("#word-output");


var word_output_value = document.querySelector("#word-output").innerHTML;


var str = "Hello World!";


//Compare the last input letter to the same position as the word output letter


input.addEventListener('input', ()=>{


lastCharInput = input.value.charAt(input.value.length-1);


sameCharHTML = word_output.innerHTML.charAt(input.value.length-1);


if(lastCharInput===sameCharHTML){


console.log(true);


}else if(lastCharInput!==sameCharHTML){


console.log(false);


};


});


</script>


</body></hmtl>

HTML:

draudigs

Единственное, что мне приходит в голову, и это не является большой проблемой, это то, что вы тестируете одно и то же дважды.

Установите для теста переменную вне оператора IF, а затем используйте эту переменную в конструкции IF. Меньше кода, легче следовать, устраняется потенциальная ошибка и может быть легче найти текущую ошибку.

Vidmith

Гораздо легче читать и следовать. Однако даже при перемещении переменной за пределы конструкции IF вы все равно сравниваете дважды. Упростите свой код примерно так:
если (х === у) {
сделай что-нибудь
}еще{
сделай что-нибудь
}

Похожие темы	Дата
[школа Современных Технологий] Среда Знаний. Основы Jquery. Дмитрий Лаврик [01.04.2015]	19.10.2024, 18:10
Курс "разработка Интерфейсов" Javascript Или Jquery От Ильи Кантора	19.10.2024, 18:10
[Loftschool] React.js.Разработка веб-приложений	19.10.2024, 18:10
калибровка.js, настройте ванильный JS-код для настраиваемых меток.	19.10.2024, 18:10
Как открыть блок следующего/предыдущего шага с помощью JS-кода?	19.10.2024, 18:10
Центрирование пользовательских отметок на карте Google	19.10.2024, 18:10
Проблема CORS, API Yahoo Finance	19.10.2024, 18:10
Как настроить файлы cookie для домена?	19.10.2024, 18:10
Сохранить состояние вкладки – HTML5 localStorage	19.10.2024, 18:10
Нулевой индикатор выполнения	19.10.2024, 18:10

Функция помощи

ninzeanh99

RacerBusiness

Рома Луговских

draudigs

Vidmith

I AM

Интересно