Conditional color coding output font from javascript function?

Question

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;
}

You can't style a value - it would need to style the element where the value resides. — James, Mar 18 '22 at 18:29
I think we'd need to know how you are sending the value to output. Is this JavaScript in a browser, in which case you'd want to look at producing the correct HTML and style for your page. Or is this console output for node.js, in which case you might look at producing ANSI escape codes to colorize text sent to standard output (perhaps even via a library like _chalk_). Or if this is just for a console.log in a browser, you can see [this answer](https://stackoverflow.com/a/13017382/1563833) — Wyck, Mar 18 '22 at 18:40
Yes I think the issue is this is not going in a browser. I don't know enough about Javascript to answer your question, but all I am doing is trying to use a custom Javascript function in this program called Survey123 by ArcGIS. More here: https://community.esri.com/t5/arcgis-survey123-blog/extending-survey123-smart-forms-with-custom-js/ba-p/898782 — Jeff Fitzgibbons, Mar 18 '22 at 18:50
This must be the reason the examples provided so far are not working. According to the site I linked above, "your code will not run within the context of a web browser; you are limited to JavaScript ES6." I am assuming that means I am more limited? Thanks to everyone who responded to quickly, quite amazing! — Jeff Fitzgibbons, Mar 18 '22 at 19:08

score 1 · Answer 1 · answered Mar 18 '22 at 18:34

@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;

score 0 · Answer 2 · answered Mar 18 '22 at 18:39

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]);

score 0 · Answer 3 · answered Mar 18 '22 at 18:54

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.

Conditional color coding output font from javascript function?

3 Answers3