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

ninzeanh99 · 17.05.24

Привет

Я хотел бы сопоставить последний символ поля ввода с символом в том же месте в выводе слова в 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>
String.prototype.replaceAt= function(index,char){ var a=this.split(""); a[index] = char; return a.join("");
};
var input = document.querySelector("#input");
var word_output = document.querySelector("#word-output");
var str = "Hello World!";
word_output.innerHTML = str;
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 · Вчера в 13:20

В таком простом сравнении, как у вас, истинное или ложное, все, что вам нужно, это ИНАЧЕ.

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

Рома Луговских · Сегодня в 06:39

Мне удалось привести код в порядок и сопоставить входной символ с символом 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>
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!";
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:

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

ninzeanh99

RacerBusiness

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

Поделиться страницей

О нашем форуме!

Новые пользователи

Что нового?