beginner here. I had a question about color coding the result of a function. The code I have below tells me the range of the last three values in my array. What I'd like to do is color code the output. So if the range is <=0.10 then the font would be red, or if it's >0.10, then the font would be green. Is there a simple way to do this? I am using this script for an ArcGIS Survey123 form.
Thanks.
function ph(invals) {
if (Array.isArray(invals) && invals.length > 2) {
var phlastthree = invals.slice(Math.max(invals.length - 3, 0));
var max = Math.max(...phlastthree);
var min = Math.min(...phlastthree);
var result = max-min
return result.toFixed(2);
}
return null;
}
@James is correct. There are a couple of options, within your JS function, either declare a new variable to output a class name, which you can then apply to the HTML element containing the value, or output an HTML string with the value inside. Something like:
function ph(invals) {
if (Array.isArray(invals) && invals.length > 2) {
var phlastthree = invals.slice(Math.max(invals.length - 3, 0));
var max = Math.max(...phlastthree);
var min = Math.min(...phlastthree);
var result = max-min
return "<span style='color: red;'>" + result.toFixed(2) + "</span>";
}
return null;
Or:
function ph(invals) {
let cssClass="green";
if (Array.isArray(invals) && invals.length > 2) {
var phlastthree = invals.slice(Math.max(invals.length - 3, 0));
var max = Math.max(...phlastthree);
var min = Math.min(...phlastthree);
var result = max-min
if( result < xxx) {
cssClass = "red";
}
return result.toFixed(2), cssClass;
}
return null;
You could clean the code a bit and get the color in a span along with the result.
function ph(invals) {
if (!Array.isArray(invals) || invals.length < 3) return '';
const
three = invals.slice(-3),
result = Math.max(...three) - Math.min(...three);
return `<span style="background-color: ${result <= 0.1 ? 'red' : 'green'}">${result.toFixed(2)}</span>`
}
document.body.innerHTML += ph([]);
document.body.innerHTML += ph([1, 2, 3]);
document.body.innerHTML += ph([0.01, 0.02, 0.03]);function ph(invals) {
if (Array.isArray(invals) && invals.length > 2) {
var phlastthree = invals.slice(Math.max(invals.length - 3, 0));
var max = Math.max(...phlastthree);
var min = Math.min(...phlastthree);
var result = max-min
return result.toFixed(2);
}
return null;
}
const DEMO_ARRAY = [1,2,3,8];
console.log(ph(DEMO_ARRAY));
var value = ph(DEMO_ARRAY);
if(value > 2)
$(".container").append(`<div class="success">${value}</div>`);
const DEMO_ARRAY1 = [1,2,3];
console.log(ph(DEMO_ARRAY1));
var value1 = ph(DEMO_ARRAY1);
if(value1 <= 2.00)
$(".container").append(`<div class="danger">${value1}</div>`);.success{
text-align:center;
color: green;
}
.danger{
text-align:center;
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>Check this Maybe it helps you. I didn't give much deep information about this because I'm not properly know how your function ph is working. But, I gave this solution for color value text.