principiante aquí. Tenía una pregunta sobre la codificación por colores del resultado de una función. El código que tengo a continuación me dice el rango de los últimos tres valores en mi matriz. Lo que me gustaría hacer es codificar por color la salida. Entonces, si el rango es <=0.10 , la fuente sería roja, o si es >0.10 , entonces la fuente sería verde. ¿Hay una manera simple de hacer esto? Estoy usando este script para un formulario ArcGIS Survey123.
Gracias.
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 tiene razón. Hay un par de opciones, dentro de su función JS, declarar una nueva variable para generar un nombre de clase, que luego puede aplicar al elemento HTML que contiene el valor, o generar una cadena HTML con el valor dentro. Algo como:
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;O:
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;Podría limpiar un poco el código y obtener el color en un lapso junto con el resultado.
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>Mira esto Tal vez te ayude. No brindé mucha información detallada sobre esto porque no sé bien cómo funciona su función ph. Pero di esta solución para el texto de valor de color.