[SOLUCIONADO] Simplificar Codigo

[JESUMINISTROSYMAS]

Saludos cordiales a todos, seré breve, recurro a este portal con la finalidad de ver si pueden aportarme luces de como simplificar un código que estoy haciendo.
No soy muy conocedor de JS pero motivado que estoy diseñando cursos en ambiente offline es el recurso que me permite configurar lo que deseo.
Vale destacar que lo que tengo hecho funciona al 100% dándome los resultados que deseo, pero solo llevo 3 bloques de configuración que poseen estructuras similares, he estado dando y dando a ver como puedo simplificar con la utilizacion de ciclos pero no logro comprender como puedo hacerlo.

Lo que tengo:
Estoy diseñando un curso para elaboracion de productos de limpieza, basicamente la idea es que desde un html se ingresa un dato numerico desde un input que es analizado por un JS a ver si es un numero mayor a 0.1 y se valida de que sea un numero y no una letra o un espacio etc etc..

luego si es un numero valido el JS da resultados segun el numero indicado, basicamente calcula las cantidades por cada producto de la receta a utilizarse en el producto de limpieza sea Cloro, Desinfectante, etc etc.

Aca el JS

Código Javascript:

function entrada(){
if(UI=document.getElementById('entradaDetergenteRopa')){detergenteRopa();}
else if(UI=document.getElementById('entradaCloro')) {cloro();}
else if(UI=document.getElementById('entradaLimpiaInodoros')) {limpiadorInodoros();}
}
 
 
function validarSiNumero(UI){
    if (!/^([0.1-9])*$/.test(UI)){
    //alert("El valor  " + UI + " no es un número valido, intente utilizar numeros desde 0.1 hasta la cantidad de litros que usted desee fabricar");
var alerta = "<div class=clase1><table class=clase2 ><tr><td>"+"EL VALOR INDICADO: <b>" + UI + "</b> NO ES UN NUMERO VALIDO<br> INTENTE UTILIZAR NUMEROS DESDE 0.1 HASTA LA CANTIDAD DE LITROS QUE USTED DESEE FABRICAR"+"</td></tr></table></div>";
    document.getElementById('salida').innerHTML=
alerta;
}
else if (UI==""){
var nada = "<div class=clase1><table class=clase2 ><tr><td>"+"NO HA ESCRITO NADA INTENTE UTILIZAR NUMEROS DESDE 0.1 HASTA LA CANTIDAD DE LITROS QUE USTED DESEE FABRICAR"+"</td></tr></table></div>";
document.getElementById('salida').innerHTML=
nada;}
else { entrada();
}}
 
var ml=" Mililitros";
var l=" Litros";
var g=" Gramos";
var mg=" Miligramos";
var k=" Kilogramos";
 
//CLORO
function cloro() {
var UI=document.getElementById('entradaCloro').value;
if(isNaN(UI)){return false;}
var agu = UI*80/100;
var hip = UI*20/100;
var fos = UI*0.25/100;
var car = UI*0.25/100;
var per = UI*0.30/100;
if (UI<=1){
agu = (agu*1000).toFixed(2) + ml;
hip = (hip*1000).toFixed(2) + ml;
fos = (fos*1000).toFixed(2) + g;
car = (car*1000).toFixed(2) + g;
per = (per*1000).toFixed(2) + ml;
}
else{
agu= agu.toFixed(2) + l;
hip= hip.toFixed(2) + l;
if (fos*1000>=1000){fos = fos.toFixed(2) + k;}else{fos=(fos*1000).toFixed(2)+g;}
if (car*1000>=1000){car = car.toFixed(2) + k;}else{car=(car*1000).toFixed(2)+g;}
if (per*1000>=1000){per = per.toFixed(2) + l;}else{per=(per*1000).toFixed(2)+ml;}
}
var pCloro = "<table class=clase4 ><tr><td><h1>PROCEDIMIENTO:</h1><p>En el recipiente plástico colocan el agua, al cual le agregan el hipoclorito de sodio y revuelven bien con la cuchara de palo, (ambos elementos los pueden medir con una probeta) Luego agregamos el fosfato trisódico y el carbonato- Previamente pesados, y deben seguir revolviendo muy bien. Adicionan la fragancia hiposódica previamente medida en la probeta, se revuelve bien todo con la cuchara de palo y empacamos con la ayuda del embudo.</p><p>Nota. La fragancia hiposódica que puede ser usada: Lavanda, Floral y Limón, siempre y cuando sean fragancias hiposódicas.</p><p><b>Recomendaciones:</b> No tiene ninguna recomendación en especial.</p><b>Precauciones:</b> Use delantal, evite las salpicaduras mientras hace el producto, pues este producto puede decolorar la ropa.</p></table>";
var resul =
"<div class=clase1><table class=clase2 ><tr><td>"+
"<b>Para Procesar "+UI+" Litros Usted Necesitará:</b>"+"<p>"+
"1.- Agua - H2O" + " = "+agu+"<br>"+
"2.- Hipoclorito - ClO−" + " = "+hip+"<br>"+
"3.- Fosfato Trisodico" + " = "+fos+"<br>"+
"4.- Carbonato ASH" + " = "+car+"<br>"+
"5.- Perfume Hiposodico" + " = "+per+"<br>"+
"</td></tr></table></div>"+ pCloro;
document.getElementById('salida').innerHTML=resul;
 
}
 
//DETERGENTE
function detergenteRopa() {
var UI=document.getElementById('entradaDetergenteRopa').value;
if(isNaN(UI)){return false;}
var tex = UI*14.1/100;
var pas = UI*0.75/100;
var ash = UI*0.2/100;
var sal = UI*3/100;
var agu = UI*82/100;
var col = UI*0.2/100;
var fra = "Al Gusto";
var form = UI*0.2/100;
if (UI<=1){
tex = (tex*1000).toFixed(2) + " ml";
pas = (pas*1000).toFixed(2) + " ml";
ash= (ash*1000).toFixed(2) + " ml";
sal= (sal*1000).toFixed(2) + " gr";
agu= (agu*1000).toFixed(2) + " ml";
col= (col*1000).toFixed(2) + " gr";
form= (form*1000).toFixed(2) + " gr";
}
else{
if (tex*1000>=1000){tex = tex.toFixed(2) + l;}else{tex=(tex*1000).toFixed(2)+ml;}
if (pas*1000>=1000){pas = pas.toFixed(2) + l;}else{pas=(pas*1000).toFixed(2)+ml;}
if (ash*1000>=1000){ash = ash.toFixed(2) + l;}else{ash=(ash*1000).toFixed(2)+ml;}
if (sal*1000>=1000){sal = sal.toFixed(2) + k;}else{sal=(sal*1000).toFixed(2)+g;}
if (agu*1000>=1000){agu = agu.toFixed(2) + l;}else{agu=(agu*1000).toFixed(2)+ml;}
if (col*1000>=1000){col = col.toFixed(2) + k;}else{col=(col*1000).toFixed(2)+g;}
if (form*1000>=1000){form = form.toFixed(2) + k;}else{form=(form*1000).toFixed(2)+g;}
}
var pDetergenteRopa = "<table class=clase4 ><tr><td><h1>PROCEDIMIENTO:</h1><p>Mezclar los ingredientes 1, 2, 3 y el 4 agitar moderadamente de forma suave luego agregar el 5 poco a poco y después agregar el 6, 7 y el 8; recuerden dejar reposar por dos horas o hasta que la espuma se disperse.<br>Los productos se deben mezclar en el orden señalado.</p><p>Nota. La fragancia mas comerciales que pueden utilizar son: Lavanda, Floral, Talco.</p><p><b>Recomendaciones:</b> No tiene ninguna recomendación en especial</p><b>Precauciones:</b> Use delantal, Guantes, Lentes.</p></table>";
var resul = 
"<div class=clase1><table class=clase2 ><tr><td>"+
"<b>Para Procesar "+UI+" Litros Usted Necesitará:</b>"+"<p>"+
"1.- Texapon" + " = "+tex+"<br>"+
"2.- Pasta Sulfonica" + " = "+pas+"<br>"+
"3.- Soda ASH Light" + " = "+ash+"<br>"+
"4.- Sal" + " = "+sal+"<br>"+
"5.- Agua - H2O" + " = "+agu+"<br>"+
"6.- Color" + " = "+col+"<br>"+
"7.- Fragancia" + " = "+fra+"<br>"+
"8.- Formol o Benzoato de Sodio" + " = "+form+"<br>"+
"</td></tr></table></div>"+ pDetergenteRopa;;
document.getElementById('salida').innerHTML=resul;
}
 
//LIMPIADOR INODOROS
function limpiadorInodoros() {
var UI=document.getElementById('entradaLimpiaInodoros').value;
if(isNaN(UI)){return false;}
var am = UI*37.5/100;
var agu = UI*62.5/100;
var af = UI*5.663/100;
var amo = UI*0.75/100;
if (UI<=1){
am = (am*1000).toFixed(2) + " ml";
agu = (agu*1000).toFixed(2) + " ml";
af= (af*1000).toFixed(2) + " gr";
amo= (amo*1000).toFixed(2) + " ml";
}
else{
if (am*1000>=1000){am = am.toFixed(2) + l;}else{am=(am*1000).toFixed(2)+ml;}
if (agu*1000>=1000){agu = agu.toFixed(2) + l;}else{agu=(agu*1000).toFixed(2)+ml;}
if (af*1000>=1000){af = af.toFixed(2) + k;}else{af=(af*1000).toFixed(2)+g;}
if (amo*1000>=1000){amo = amo.toFixed(2) + l;}else{amo=(amo*1000).toFixed(2)+ml;}
}
var pLimpiadorInodoros = "<table class=clase4><tr><td><h1>PROCEDIMIENTO:</h1><p>Disolver el uno en el dos y luego el tres y después el 4 Siempre respetar el orden indicado. <br><li>El uno es un agente descurtidor.</li><li>El tres es un removedor de oxido.</li><li>El cuatro es un agente antibacterial.</li><br></p><b>Precauciones:</b> Use delantal, Guantes, Lentes.</p></table>";
var resul = 
"<div class=clase1><table class=clase2 ><tr><td>"+
"<b>Para Procesar "+UI+" Litros Usted Necesitará:</b>"+"<p>"+
"1.- Acido Muriatico" + " = "+am+"<br>"+
"2.- Agua - H2O" + " = "+agu+"<br>"+
"3.- Acido Fosforico" + " = "+af+"<br>"+
"4.- Amonio Cuaternario al 80%" + " = "+amo+"<br>"+
"</td></tr></table></div>"+ pLimpiadorInodoros;;
document.getElementById('salida').innerHTML=resul;
}
 

Como indique anteriormente tal cual como esta funciona pero aun estoy haciendo código ya que son mas de 50 productos a configurar, tengo adicional una función que se repite n cantidad de veces y es para determinar que si el valor resultado es < de 1000 ml o gr utilice la unidad ml o gr y si es mayor utilice Litro o Kilo respectivamente, Repito, tal como esta, funciona pero si se puede simplificar me gustaría implementar dicha simplificación, si alguien ve la forma de como simplificar el código que estoy escribiendo estaré agradecido.

[alvaro_trewhela]

No sé como son tus otros 50 productos, tal vez podrías categorizar los productos que se traten de misma manera, es decir, si por ejemplo tienes 10 detergentes de los cuales los 10 usan la misma función pero con distintos valores, usar dicha función y pasar valores por parámetros.

Ejemplo:

Código Javascript:

function detergente(nombre, cantidad, tipo){
alert("Este detergente se llama "+nombre+" usa "+cantidad+" por litro");
    if(tipo == 1){
    alert("Este detergente es seco");
    }
    else if(tipo == 2){
    alert("Este detergente es liquido");
    }
    else{
    alert("Este detergente es en gel");
    }
}
 

entonces puedes usar la funcion:

detergente("detergencito", 500, 1);
detergente("suer detergente", 1500, 2);
detergente("limpia todo", 800, 3);

y así para todos, limpiadores, jabones, etc...

Por otro lado veo que tu creas un table y un div mediante un string para entregar información de salida de las funciones, te recomiendo no crearlas, usa esto:

en cambio de usar esto:

Código Javascript:

function salida(){
var crearDiv = '<div id="divSalida" class="salida">Algún mensaje</div>';
}
 

usa esto:

Código Javascript:

function salida(){
document.getElementById("divSalida").innerHTML = "Algún mensaje...";
}
 

y tener en el DOM un div con id que desees y entregar el mensaje de salida..

Ahora si cada producto es tratado de forma indepentiende no tienes más opción que hacer una función para cada producto (creo).

eso se me ocurre por ahora....

EDITÉ