innerHTML and change color

Question

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.

Krupa Gowda · Answer 1 · 2015-08-26T06:14:52.277

3

chatTextBox.innerHTML = " hi ";

try this way, it should ideally work.

edited Aug 26 '15 at 06:14

answered Aug 26 '15 at 05:41

Krupa Gowda

59
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

Cannicide · Answer 2 · 2020-03-25T18:30:25.990

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  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  tag, you can insert the  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.

score 0 · Answer 3 · answered Jul 07 '13 at 03:43

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.

answered Jul 07 '13 at 03:43

Musa

93,746
17
112
129

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

score 0 · Answer 4 · answered Jul 07 '13 at 03:47

0

Style accessible this way:

document.getElementById("chatTextBox").style.visibility = 'hidden';
document.getElementById('chatTextBox').innerHTML = "Hello";

answered Jul 07 '13 at 03:47

stackexchanger

121
1
4

score 0 · Answer 5 · answered Sep 10 '15 at 09:45

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!

innerHTML and change color

5 Answers5