- 17, May 2024
- #1
Привет
Я хотел бы сопоставить последний символ поля ввода с символом в том же месте в выводе слова в HTML.
Если он соответствует, ничего не делайте, а если он не соответствует, выделите его красным, чтобы пользователь знал, что он допустил несоответствие типа. Я успешно обнаружил неправильный символ и сумел сделать его красным.
Но затем начинаются проблемы.
Он печатает всю эту ерунду, и я не уверен, в чем проблема. Код ниже:
Я хотел бы сопоставить последний символ поля ввода с символом в том же месте в выводе слова в 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>
![[kor-book] Обучающий курс: AliExpress Золотая жила](/assets/images/icons/forum6.png){kind=icon}
![[Россоловски]-Как бросить курить. Программа аудио-стимулятор](/assets/images/icons/forum3.png){kind=icon}
