Forum Moderators: open

Message Too Old, No Replies

How to change the text colour(color) in javascript

*The Style is diffrent

         

Bolton

7:30 am on Jun 14, 2011 (gmt 0)

10+ Year Member



Hello i am a new comer and this is my first thread post here is code -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.example.org">
<html xmlns="http://www.example.org">
<head>
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function a()
{
var a = parseFloat(document.getElementById('r1').value);
var b = parseFloat(document.getElementById('r2').value);
var e = parseFloat(document.getElementById('c').value);
if (e >= a && e <= b)
{
writetolog("Congratulations! You entered correct");
}
else
{
writetolog("Sorry Wrong");
c.select();
}
}
function writetolog(givenstring)
{
var txt = document.getElementById('txtarea1');
txt.innerHTML = txt.innerHTML + '\n' + givenstring;
}
</script>
</head>
<body>
<div>
Starting Range</div>
<input type="text" id="r1" style="width: 50px" />
<div>
Ending Range</div>
<input type="text" id="r2" style="width: 50px" />
<div>
Code</div>
<input type="text" id="c" style="width: 100px" />
<input type="button" value="GO" onclick="a()" />
<div id="txtarea1">
</div>
</textarea>
</body>
</html>

The Bold area is the important one here ive got to print the log in the div. The code is working correct but i have to color the log text how would i do it?

JAB Creations

1:41 pm on Jun 14, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Bolton, welcome to WebmasterWorld. :)

First off don't use innerHTML, it's an unreliable proprietary Microsoft method. Secondly when using form fields you should use the value property to read or write to the form...

alert(document.getElementById('c').value)
document.getElementById('c').value = 'oh hai';


To read text from a non-form field element use the following. Change the ID of the second line in to what the ID of the log divisible element is or what you will choose.

document.getElementById('my_paragraph').firstChild.nodeValue


If you want to insert


var writetolog = 'some text';
var p = document.getElementById('parent_element_id_insert_into');
var d = document.createElement('div');
d.setAttribute('class','margin');
var s = document.createElement('span');
var t = document.createTextNode(writetolog);
s.appendChild(t);
d.appendChild(s);
r.appendChild(d);
var l = document.createTextNode('\n');
d.parentNode.insertBefore(l,d.parentNode.lastChild);


Hope this helps. :)

- John

Bolton

6:19 am on Jun 15, 2011 (gmt 0)

10+ Year Member



Thank You John it worked but i have to still change the color of the text... i mean that text i am printing (Congratulations...........) so i have to color {Congratulations..............} green in color and {Sorry..............} red in color.
Pls reply

Bolton

7:29 am on Jun 15, 2011 (gmt 0)

10+ Year Member



Thankx John again because i modified your code a little bit and :D

susky

5:04 pm on Jun 15, 2011 (gmt 0)

10+ Year Member



Hi Bolton, welcome to WebmasterWorld.
i am a new comer too.
how to change the text color?
however this is very easy,only change css by javascript

document.getElementById("txtarea1").style.color="red";

i hope my reply is helpful to you

susky

5:08 pm on Jun 15, 2011 (gmt 0)

10+ Year Member



if (e >= a && e <= b)
{
writetolog("<span style='color:blue'>Congratulations! You entered correct</span>");
}
else
{
writetolog("<span style='color:red'>Sorry Wrong</span>");
c.select();
}

Hope this help:

susky

JAB Creations

2:35 am on Jun 17, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You're welcome though I'm not exactly sure if you were able to achieve your goal?

- John