Блог

Главная - Вопросы по программированию - Как изменить цвет шрифта переменной после отображения результата в JavaScript?

Как изменить цвет шрифта переменной после отображения результата в JavaScript?

#javascript #html

#javascript #HTML

Вопрос:

Я новичок в JavaScript и пытаюсь изменить цвет переменной / элемента (имя, возраст и статус), когда он отображает выходные данные в моем коде JavaScript. По какой-то причине вывод не отображается. Вот код ниже:

 <html>
    
<head>
    <script>
        function ageCalculator() {
            var name = document.getElementById("name").value;
            var birthdate = document.getElementById("dob").value;
            var dob = new Date(birthdate);
            var status;

            if(birthdate==null || birthdate=='') {
            document.getElementById("message").innerHTML = "<br><br>Choose a date properly!";  
            return false; 
            } else {
            
            var month_diff = Date.now() - dob.getTime(); 
            
            var age_date = new Date(month_diff); 
            
            var year = age_date.getUTCFullYear();
            
            var age = Math.abs(year - 1970);
        
            if (age<20)
            status = "You are still young!";
            else if (age>=20 amp;amp; age<=25)
            status = "Now start thinking to have your own family!";
            else
            status = "Be responsible and care about others!";

            return document.getElementById("result").innerHTML =  
                    " Hello "   name.css('color','red')   "<br><br> You are "   age.css('color','red')    " year-old"   "<br><br>"   status.css('color','red');
            

            }
        }
    </script>
</head>

<body>
    <center>
   
    <b> Enter your name : <input type="text" id="name" name="name" ><br><br>
    
 
    <b> Enter your birthday: <input type=date id = dob> </b>
    <span id = "message" style="color:darkred"> </span> <br><br>  

    <button type="submit" onclick = "ageCalculator()"> Submit </button> <br>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <h4 id="result" align="center"></h4>  
    </center>
</body>

</html>

Вот пример вывода:
введите описание изображения здесь

Ответ №1:

Вы можете добавить класс CSS в тег style и добавить тег span вокруг текста, к которому вы хотите применить стиль.

Добавьте тег стиля ниже в свой элемент head.

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

Теперь в innerHTML добавьте тег span и примените стили.

 return document.getElementById("result").innerHTML =  
                " Hello <span class='txtColor'>"   name   "</span><br><br> You are <span class='txtColor'>"   age    "</span> year-old"   "<br><br><span class='txtColor'>"   status   "</span>";

Пожалуйста, отметьте это как ответ, если это поможет.