5
chatTextBox.innerHTML = '<span style="color:#FF0000"> hi </span>';

This is what I want to do, but the innerHTML just becomes

<span style="color:#FF0000"> hi </span>

and not hi in red.

Note: I'm using a TextArea and I want to be able to write in multiple text color.

PerfectAffix
  • 83
  • 1
  • 2
  • 7

6 Answers6

4

chatTextBox.innerHTML = "<span style='color:#FF0000'> hi </span>";

try this way, it should ideally work.

Krupa Gowda
  • 69
  • 4
  • 1
    I don't see how that would ideally work in a textarea at all. In fact, that is exactly the same line of code that is in the question. It's the line of code that the OP tells us *doesn't* work. If you try adding HTML elements into a textarea element they will not show up as HTML elements, they will show up as plain text. – Cannicide Mar 25 '20 at 18:34
1

This is possible with a contenteditable element. To sum it up, you can use the contenteditable attribute to turn any element into a textarea-like element. The contenteditable attribute can allow you to type in a <p> tag, like so:

<p contenteditable="true" id="changeColor">
    Click <span style="color:red">to</span> type
</p>

Because the contenteditable element is not a textarea, you can add actual code inside it. With the contenteditable <p> tag, you can insert the <span> tag you showed us in your question and set its color using CSS. A good example and more explanation can be found at my answer to a similar question.

Cannicide
  • 4,360
  • 3
  • 22
  • 42
0
chatTextBox.value = 'hi';
chatTextBox.style.color = 'red';

Now if you want to have many different colour text you cant use a textarea you'll have to use some kind of contenteditable element.

Musa
  • 96,336
  • 17
  • 118
  • 137
  • My goal was effectively to have different color texts on the same TextArea... So what do I do now? contenteditable element? – PerfectAffix Jul 07 '13 at 03:46
  • @PerfectAffix that's what I said. – Musa Jul 07 '13 at 03:48
  • Yeah but what's a contenteditable element? Do I simply need to set contenteditable='true' and what I'm trying to do with the TextArea will work? – PerfectAffix Jul 07 '13 at 03:59
  • @PerfectAffix `contenteditable` wont work on a text area use a paragraph or a division. Also do research on contenteditable. – Musa Jul 07 '13 at 04:04
0

Style accessible this way:

document.getElementById("chatTextBox").style.visibility = 'hidden';
document.getElementById('chatTextBox').innerHTML = "Hello";
stackexchanger
  • 121
  • 1
  • 4
0

I'm not sure if this is what you want but have a look at this Codepen! It changes color of input box randomly. Here's the HTML Below:

<div style="height:150px">
  <h1>Type in the Input BOX below and see changing colors as you type!!</h1>
  <br><br>
  <input type="text" id="multi" style="width:100%; height:100px; font-size:26px;" onkeydown="myFunction()">
</div>


Here's is JS:

var myArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']; 
function myFunction(){
var rand = myArray[Math.round(Math.random() * (myArray.length - 1))];
var rand1 = myArray[Math.round(Math.random() * (myArray.length - 1))];
var rand2 = myArray[Math.round(Math.random() * (myArray.length - 1))];
var rand3 = myArray[Math.round(Math.random() * (myArray.length - 1))];
var rand4 = myArray[Math.round(Math.random() * (myArray.length - 1))];
var rand5 = myArray[Math.round(Math.random() * (myArray.length - 1))];

document.getElementById("multi").style.color = '#'+rand+rand1+rand2+rand3+rand4+rand5;
}

P.S. I'm new to java script but i tried helping!

Tushar Shukla
  • 5,666
  • 2
  • 27
  • 41
-1
<script>
    const mg = document.getElementById("demo");
    mg.innerHTML = "Hello World";
    mg.style.color = "blue";
</script>
Tpss Santosh
  • 1
  • 1
  • 2
    What does this answer provide that existing answers do not? Please explain your code. – Captain Hat Dec 09 '22 at 12:57
  • While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌​code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – PeterS Dec 09 '22 at 15:19