У меня есть функция Javascript, которую я хочу предоставить мгновенной обратной связи, поскольку пользователь вводит свой адрес электронной почты и пароль. И адрес электронной почты, и пароль имеют формы подтверждения электронной почты и подтверждения пароля. Если пользователь вводит два электронных письма, которые не совпадают, или два пароля, которые не совпадают, я хочу, чтобы подсказка немедленно отображалась, а затем исчезала, если пользователь исправляет эту проблему.
Мне удалось создать рабочий код, но я надеялся создать 1 функцию для обеспечения функциональности в обеих ситуациях, но я не могу заставить ее работать. Вот мой новый код:
window.onload = function(){
function match_handler(field_one, field_two, text_hint){
console.log("field one is:" + field_one);
console.log("field one value is:" + field_one.value);
if (field_one.value != field_two.value) {
text_hint.style.display = "block";
} else {
text_hint.style.display = "none";
}
}
//Test to see if the emails match
var em1 = document.getElementById("em1");
var em2 = document.getElementById("em2");
var emHint = document.getElementById("emHint");
em1.addEventListener("keyup", match_handler(em1, em2, emHint));
em1.addEventListener("focus", match_handler(em1, em2, emHint));
em1.addEventListener("blur", match_handler(em1, em2, emHint));
em2.addEventListener("keyup", match_handler(em1, em2, emHint));
em2.addEventListener("focus", match_handler(em1, em2, emHint));
em2.addEventListener("blur", match_handler(em1, em2, emHint));
// Then I have the same code as for the email, except
// for the password matching the password confirmation input
// with function calls like:
pswd1.addEventListener("keyup", match_handler(pswd1, pswd2, pswdHint));
}
Когда я console.log «field_one» я вижу, что есть объект, но тогда «field_one.value» пусто. Я не уверен, в чем проблема, но я ожидаю, что есть простое решение. Любые другие предложения, связанные с улучшением вышеуказанного кода, будут приветствоваться. JQuery также возможен. Спасибо за вашу помощь.
Я разобрался с ответом на свой вопрос. Видимо, формат моего вызова функции был неправильным:
var em1 = document.getElementById("em1");
var em2 = document.getElementById("em2");
var emHint = document.getElementById("emHint");
em1.addEventListener("keyup", function(){match_handler(em1, em2, emHint);});
em1.addEventListener("focus", function(){match_handler(em1, em2, emHint);});
em1.addEventListener("blur", function(){match_handler(em1, em2, emHint);});
em2.addEventListener("keyup", function(){match_handler(em1, em2, emHint);});
em2.addEventListener("focus",function(){match_handler(em1, em2, emHint);});
em2.addEventListener("blur", function(){match_handler(em1, em2, emHint);});
function match_handler(field_one, field_two, text_hint){
if (field_one.value != field_two.value) {
text_hint.style.display = "block";
} else {
text_hint.style.display = "none";
}
}
и вуаля, это работает!
Других решений пока нет …