This topic is locked

JavaScript onload font color

7/4/2018 2:40:41 PM
PHPRunner General questions
B
beishmc author

I have following code which calculate values on the fly:
var ctrlPstanje = Runner.getControl(pageid, 'pocetno_stanje');

var ctrlZstanje = Runner.getControl(pageid, 'zavrsno_stanje');

var ctrlUkupno = Runner.getControl(pageid, 'predjeno_km');

function func() {

ctrlUkupno.setValue((+ctrlZstanje.getValue()) -

(+ctrlPstanje.getValue())) ;

};

ctrlPstanje.on('keyup', func);

ctrlZstanje.on('keyup', func);

ctrlUkupno.on('keyup', func);
How can i change font color of the result based on result value?


I tried something like this but it doan't work:
if (ctrlUkupno.setValue((+ctrlZstanje.getValue()) -

(+ctrlPstanje.getValue()))<0) {

ctrlUkupno.addStyle('font-size: 12px; color: red;');

} else {

ctrlUkupno.addStyle('font-size: 12px; color: green;');

}

admin 7/5/2018

You are not saying anything about what exactly doesn't work, your calculation or the part where you trying to assign color.
Normally you need to step through your code to make sure there are no Javascript errors, calculations are correct and correct branch of code is executed. If everything looks correct instead of addStyle you can try jQuery's css() function: http://api.jquery.com/css/

B
beishmc author 7/5/2018



You are not saying anything about what exactly doesn't work, your calculation or the part where you trying to assign color.
Normally you need to step through your code to make sure there are no Javascript errors, calculations are correct and correct branch of code is executed. If everything looks correct instead of addStyle you can try jQuery's css() function: http://api.jquery.com/css/


When i put just this piece of code with calculations it works without problems.
var ctrlPstanje = Runner.getControl(pageid, 'pocetno_stanje');

var ctrlZstanje = Runner.getControl(pageid, 'zavrsno_stanje');

var ctrlUkupno = Runner.getControl(pageid, 'predjeno_km');

function func() {

ctrlUkupno.setValue((+ctrlZstanje.getValue()) -

(+ctrlPstanje.getValue())) ;

};

ctrlPstanje.on('keyup', func);

ctrlZstanje.on('keyup', func);

ctrlUkupno.on('keyup', func);
What i really need is to incorporate if else condition based on calculation to show different colors of fonts, eg. if calculated value is less than 0 to show font in red else to show fonts in green.
Best regards

admin 7/5/2018

You really need to follow troubleshooting steps in my previous post. I'm talking about calculation inside your IF statement. You need to make sure that it produces correct result, find which branch gets executed etc.

M
Mark Kramer 8/2/2018



I have following code which calculate values on the fly:
var ctrlPstanje = Runner.getControl(pageid, 'pocetno_stanje');

var ctrlZstanje = Runner.getControl(pageid, 'zavrsno_stanje');

var ctrlUkupno = Runner.getControl(pageid, 'predjeno_km');

function func() {

ctrlUkupno.setValue((+ctrlZstanje.getValue()) -

(+ctrlPstanje.getValue())) ;

};

ctrlPstanje.on('keyup', func);

ctrlZstanje.on('keyup', func);

ctrlUkupno.on('keyup', func);
How can i change font color of the result based on result value?


I tried something like this but it doan't work:
if (ctrlUkupno.setValue((+ctrlZstanje.getValue()) -

(+ctrlPstanje.getValue()))<0) {

ctrlUkupno.addStyle('font-size: 12px; color: red;');

} else {

ctrlUkupno.addStyle('font-size: 12px; color: green;');

}


This worked for me.

Go to the "field properties" of the "calculated field name" Under "View" choose "custom" and enter code like this:
if ($value > 79) {

$color="green";

} else {

$color="red";

}

$value="<font color='$color'>$value</font>";
//$value is the calculated field. In this case if the values is greater than 79 it will be green, else it is red.

B
beishmc author 8/5/2018



This worked for me.

Go to the "field properties" of the "calculated field name" Under "View" choose "custom" and enter code like this:
if ($value > 79) {

$color="green";

} else {

$color="red";

}

$value="<font color='$color'>$value</font>";
//$value is the calculated field. In this case if the values is greater than 79 it will be green, else it is red.


Thank you for your answer but this is not suitable for me, i need on the fly changing colors and yours example is changing colors based on recorded value.

C
cristi 8/5/2018

I think that you need to use .css function like admin pointed out.

You must use the css() function on the element itself and not the value so you need to know the element id - you can find that easy by looking at the html of the generated page and searching for the element id of your control.
Working example - here the element id of the "total" textbox control is: #value_total_1:

var number1=Runner.getControl(pageid,'number1');

var number2=Runner.getControl(pageid,'number2');

var total=Runner.getControl(pageid,'total');
function func(){

total.setValue(Number(number1.getValue())-Number(number2.getValue()));

};
number1.on('keyup',func);

number2.on('keyup',func);

number1.on('keyup',func1);

number2.on('keyup',func1);
function func1(){

if (total.getValue()<0)

{

$("#value_total_1").css({

'color':'red',

'font-size': '12px'

});

}

else if (total.getValue()>=0) {

$("#value_total_1").css({

'color':'green',

'font-size': '12px'

});

}

};
M
Mark Kramer 8/9/2018



Thank you for your answer but this is not suitable for me, i need on the fly changing colors and yours example is changing colors based on recorded value.


These are not recorded values yet. The "on the fly" values are from jscript. Read this https://xlinesoft.com/phprunner/docs/how_to_calculate_values_on_the_fly.htm
In the example .....
var ctrlPrice = Runner.getControl(pageid, 'Price');
var ctrlQuantity = Runner.getControl(pageid, 'Quantity');
var ctrlTotal = Runner.getControl(pageid, 'Total');
function func() {
ctrlTotal.setValue(Number(ctrlPrice.getValue()) * Number(ctrlQuantity.getValue()));
};
In the above example:

The "Total" field is where you put the PHP I showed you before. The example code goes in the the JaveaScript Onload event.