How to change the font color of an user input value (prompt) in JavaScript?

Question

How can I change the color of the value of the variable number ( nb )? How can I change the font color of an user input value (prompt) in JavaScript?


<html>
    <head>
        <style>
            #block{
                color: white;
                width: 300px;
                height: 60px;
                background-color: #2b2e2e;
                text-align: center;
                padding-top: 30px;
            }
        </style>
    </head>
    <body>
        <div id="block">
            
        </div>
        <script>
            window.onload = function printNumber(){
                var unBlock = document.getElementById("block");
                var nb = Number(prompt("Saisir un nombre: "));
                
                if(nb == null || nb == ""){
                    unBlock.innerHTML = "No input number.";
                }else{
                    unBlock.innerHTML = "Your input number is "+nb;
                }
                
            }
        </script>
    </body>
</html>

Answer 1

The code below illustrates two ways.

By creating a span with colored as its class, it turns it blue.
Subsequently, in my code, I'm overriding that by turning it red using javascript.

Either of those methods will work, but you only need one, not both. I used both just for illustration of your options.

 window.onload = function printNumber() { var unBlock = document.getElementById("block"); var nb = Number(prompt("Saisir un nombre: ")); if (nb == null || nb == "") { unBlock.innerHTML = "No input number."; } else { unBlock.innerHTML = `Your input number is <span class='colored'>${nb}</span>`; //the next line will select your span and override blue with red. document.querySelector("span.colored").style.color = 'red'; } }

 #block { color: white; width: 300px; height: 60px; background-color: #2b2e2e; text-align: center; padding-top: 30px; } span.colored { color: blue; }

 <div id="block"> </div>

How to change the font color of an user input value (prompt) in JavaScript?

Question

1 answers

solution1
2 ACCPTED 2020-11-19 16:46:19

How to change the font color of an user input value (prompt) in JavaScript?

Question

1 answers

solution1 2 ACCPTED 2020-11-19 16:46:19

solution1
2 ACCPTED 2020-11-19 16:46:19