Как изменить цвет текста динамически?

Question

Я хочу «Пароль Сопряганы» в зеленом цвете & «пароль не совпадает» в красном цвете

Я Пытаюсь эти строки кодов, но не происхожу. Но главная проблема заключается в том, что идет «Согласованный пароль» & «Пароль не совпадает».

<script type="text/javascript"> 

function checkPasswordMatch() { 
var password = $("#txtNewPassword").val(); 
var confirmPassword = $("#txtConfirmPassword").val(); 

if (password == confirmPassword) 
    $("#divCheckPasswordMatch").html("Password Matched"); 
else 
    $("#divCheckPasswordMatch2").html("Passwords Don't Match."); 
} 

$(document).ready(function() { 
$("#txtConfirmPassword").keyup(checkPasswordMatch); 
}); 
</script> 

И это мой HTML код

<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword"> 
<br /> 
<input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();"> 
<div id="divCheckPasswordMatch2" style="color:red"> 
<div id="divCheckPasswordMatch" style="color:green"> 

Answer 1

<div> в вашем html необходимо закрыть. Ваш браузер не знает, как структура сломанной HTML, так что, скорее всего, сделает вашу HTML как вложенные <div>-х, как это:

<div id="divCheckPasswordMatch2" style="color:red"> 
    <div id="divCheckPasswordMatch" style="color:green"> 
    </div> 
</div> 

Это означает, что при замене HTML с яваскрипта строки:

$("#divCheckPasswordMatch2").html("Passwords Don't Match."); 

Что браузер удаляет другой <div>, чтобы положить в строку "Passwords Don't Match". Результат:

<div id="divCheckPasswordMatch2" style="color:red"> 
    <!-- This other div is removed --> 
    Passwords don't match 
</div> 

Теперь любая попытка заменить текст на #divCheckPasswordMatch потерпит неудачу, потому что элемент не существует.

Вот как исправить эту проблему: адд закрывающий теги

<div id="divCheckPasswordMatch2" style="color:red"></div> 
<div id="divCheckPasswordMatch" style="color:green"></div> 

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

Теперь давайте примем это исправление немного дальше.

@ dman2306 правильно указал, что ваш код покажет как сообщение об ошибке, так и сообщение об успешном завершении, как указано. Давайте исправим это, используя только один div и изменив класс.

Используйте следующее:

//HTML5 does not require type tags on your script blocks 
 
    function checkPasswordMatch() { 
 
     var password = $("#txtNewPassword").val(); 
 
     var confirmPassword = $("#txtConfirmPassword").val(); 
 
     var div = $("#messageBlock"); 
 
    
 
     if (password == confirmPassword){ 
 
      $(div).removeClass("bad_password"); 
 
      if(password == "" && confirmPassword == ""){ 
 
       /* 
 
        We do not delete the div. 
 
        We set the html content to 
 
        an empty string. This way 
 
        we can use the DIV again in the future */ 
 
       $(div).html(""); 
 
      }else{ 
 
       $(div).html("Password Matched"); 
 
      } 
 
     } 
 
     else 
 
     { 
 
      $(div).html("Passwords Don't Match."); 
 
      $(div).addClass("bad_password"); 
 
     } 
 
    } 
 
    
 
    $(document).ready(function() { 
 
     $("#txtConfirmPassword").keyup(checkPasswordMatch); 
 
    });

#messageBlock { color: green; } 
 
    #messageBlock.bad_password { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Example</h1> 
 
<p>Please enter passwords to check the behavior of the message div</p> 
 
<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword"> 
 
    <br /> 
 
    <input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();"> 
 
    <div id="messageBlock"><!-- this is where ALL messages appear, and the color is based on the class name --></div>

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

Этот код имеет следующие преимущества:

1. С помощью одного сообщения DIV, вы показываете только одно сообщение за один раз. Все новые сообщения заменяют предыдущее сообщение.
2. Цвет не жестко закодирован в элемент, поэтому вы можете изменить внешний вид своей страницы, просто изменив свой css, который теперь находится в элементе <style>.
3. Ваш javascript станет немного более простым, вам нужно только беспокоиться о добавлении правильного сообщения, а затем добавить или удалить одно имя класса. Цвет текста по умолчанию зеленый, а с именем класса bad_password цвет текста меняется на красный.

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

Answer 2

Попробуйте что-то, как показано ниже, чтобы иметь постоянный цвет:

if (password == confirmPassword) 
    $("#divCheckPasswordMatch").html("Password Matched").css("color", "green"); 
else 
    $("#divCheckPasswordMatch2").html("Passwords Don't Match.").css("color", "red"); 
} 

Answer 3

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

<style> 
    .green { 
     color: green; 
    } 
    .red { 
     color: red; 
    } 
</style> 

<script type="text/javascript"> 
    function checkPasswordMatch() { 
     var password = $("#txtNewPassword").val(); 
     var confirmPassword = $("#txtConfirmPassword").val(); 

     if (password == confirmPassword) { 
      $("#divCheckPasswordMatch").text("Password Matched"); 
      $("#divCheckPasswordMatch").css("color", "green"); 
     } 
     else { 
      $("#divCheckPasswordMatch").text("Passwords Don't Match"); 
      $("#divCheckPasswordMatch").css("color", "red"); 

     } 
    } 

    function clearMessage() { 
     $("#divCheckPasswordMatch").text(""); 
    } 

    $(document).ready(function() { 
     $("#txtNewPassword").keyup(clearMessage); 
     $("#txtConfirmPassword").keyup(checkPasswordMatch); 
    }); 
</script> 

<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword"> 
<br /> 
<input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();"> 
<div id="divCheckPasswordMatch"></div>