PDA

View Full Version : Need help for changing color of a value to put into html



tightendutah
02-01-2011, 05:06 PM
So my functions are dealing with Time. The function delay_time() is called by clicking a button in html and the return value of the function is displayed in a textbox. What I need to do is basically if the value of resultingtime is greater that the value of delay time I need the value shown in red(ff0000) and bold and if it isnt then I need it displayed in bold green(00ff00). but Ive tried doing this in my javascript and found that I cant code it in there the way that I know. I really dont know what to do...
I think that I have to do it in the html coding but I dont know how.
Here is the javascript I wrote:



function delay_time(idealTime, startTime, stopTime, delayTime) {
var delay_time = idealTime.value;
var bigger_time = stopTime.value;
var smaller_time = startTime.value;
var resultingtime = subtract_time(bigger_time, smaller_time, delay_time);

//if (resultingtime > delay_time) {
//resultingtime = resultingtime.fontcolor("ff2000");
//resultingtime = resultingtime.bold();
//}
//else {
//resultingtime = resultingtime.fontcolor("60ff00");
//resultingtime = resultingtime.bold();
//}



delayTime.value = resultingtime;
}

function subtract_time(bigger_time, smaller_time, delay_time) {
var bigger_value = convert_time_to_value(bigger_time);
var smaller_value = convert_time_to_value(smaller_time);
var idealTime = delay_time;
var resultingtime = bigger_value - smaller_value;
return resultingtime;
}

function convert_time_to_value(time_format) {
var hh = time_format.substring(0, 2);
var mm = time_format.substring(3, 5);

var time_value = (eval(hh) * 60) + (eval(mm) * 1);
return time_value;
}


and here is the html code for the button :


ID="Button15" type="button" value="Delay Time"


onclick="delay_time(document.getElementById('TextBox102'), document.getElementById('TextBox104'), document.getElementById('TextBox105'), document.getElementById('TextBox106'))"/>


here is the text box I have the value going into:



<asp:TextBox ID="TextBox106" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif;
font-size: medium" Width="0.75in" BorderStyle="Inset"></asp:TextBox>


and here is the code from the box that I need to know if the value is bigger or smaller than:



<asp:TextBox ID="TextBox102" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif;
font-size: medium; text-align: right;" Width="0.5in" BorderStyle="Inset"></asp:TextBox>


please help.

Philip M
02-01-2011, 07:16 PM
Your syntax is not at all correct. You cannot set the style of a variable. Here is an example of setting the color and font-weight of a <span> element with Javascript:-


<span id = "myelement1">Some text here</span>

<script type = "text/javascript">
var resultingtime = 100; // examples for testing
var delaytime = 50; // example for testing
if (resultingtime > delaytime) {
document.getElementById("myelement1").style.color = "ff0000";
document.getElementById("myelement1").style.fontWeight="bold";
}
else {
document.getElementById("myelement1").style.color = "00ff00";
document.getElementById("myelement1").style.fontWeight="bold";
}

</script>

Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. Everyone here needs help with Javascript. You can (and should) edit it to make it more meaningful.


Quizmaster: Which European country's name was literally intended to mean "The Way North"?
Contestant: France.

tightendutah
02-01-2011, 08:58 PM
Well my problem is that I'm using this function for more than one set of times I'm running through this function so I can't hard code the document.getElementByID("myelement") into the function since I need to use it for other variables as well. If I cant set the style of a variable, can I do an "if else" statement in the html code?

Philip M
02-01-2011, 09:15 PM
can I do an "if else" statement in the html code?

Well, no.

You can naturally pass the name of the element to the script so as to make it useable for multiple elements. Example:-


<span id = "myelement1">Some text here</span>

<script type = "text/javascript">
function changeStyle(which) { // which is the id of the element involved
var resultingtime = 100; // examples for testing
var delaytime = 50; // example for testing
if (resultingtime > delaytime) {
document.getElementById(which).style.color = "ff0000";
document.getElementById(which).style.fontWeight="bold";
}
else {
document.getElementById(which).style.color = "00ff00";
document.getElementById(which).style.fontWeight="bold";
}
}

changeStyle("myelement1")
</script>

Thank you for changing the thread title.