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>

I have tried this example, that didn't work: nb.style.color = "blue"; — S Shane
– S Shane, Commented Nov 19, 2020 at 16:38
The reason nb.style.color = "blue"; doesn't work is because nb is just a variable representing the number that was entered. It does not control the HTML element where your nb will be rendered. — Marc
– Marc, Commented Nov 19, 2020 at 16:48
You can't change the color of anything in the dialog created as a result of the prompt command. — Heretic Monkey
– Heretic Monkey, Commented Nov 19, 2020 at 16:51
Does this answer your question? changing color using javascript — Heretic Monkey
– Heretic Monkey, Commented Nov 19, 2020 at 16:53

Marc · Accepted Answer · 2020-11-19 16:46:19Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related