Estoy creando un contador automático en JS, donde a partir de seleccionar opciones múltiples en un select, cada uno de estas opciones, las cuales son Rasgos, envían una cifra numérica determinada por un coste numérico, mandando así la cifra a un mismo input (o varios).
Mi intención es que al colocar estas cifras, quedase en el input en general, o por el contrario, tres inputs, de esta forma: X/Y/Z.
De tal forma, que el valor X corresponderá con los valores numéricos positivos, el valor Y con los valores numéricos negativos, y por último, el valor Z con la diferencia de ambos, pudiendo quedar un número positivo o 0 únicamente, en el caso de aparecer un número negativo que apareciese algún tipo de error que no dejase continuar.
Por ejemplo, el Rasgo positivo "Cuerpo Grande" generará -5, mientras que el Rasgo positivo "Con reflejos" generará -6. En este caso, me gustaría que el valor negativo apareciese sin el guión que índica que es un número negativo. Los valores se sumarían al añadirlos, es decir, si añado los Rasgos positivos "Cuerpo Grande" y "Con reflejos" generaría un total de -11.
Por otro lado, habría un número inicial en el input positivo, es decir en X de 10.
En principio, el select abarcará unos 50 valores aproximadamente, dividiendo los rasgos en positivas y negativas. Las variables positivas siempre generarán un número negativo, mientras que las variables negativas generarán un número positivo.
Realmente no sé como podría desarrollar esto, ya que la idea es incorporarlo en un formulario-generador que he hecho. Os dejo por ahora lo que tengo hecho, para qué podáis ver la idea básica.
https://codepen.io/maleficarum/pen/BaozypR
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<select name="rasgos" class="multipleChosen rasgos" multiple="true">
<optgroup label="Positivos"><option value="Cuerpo grande">Cuerpo grande</option>
<option value="Musculoso">Musculoso</option>
<option value="Ágil">Ágil</option>
<option value="Con reflejos">Con reflejos</option>
<option value="Preciso">Preciso</option>
<option value="Afortunado">Afortunado</option>
<option value="Atento">Atento</option>
<option value="Agraciado">Agraciado</option>
<option value="Vivaz">Vivaz</option>
<option value="Culto">Culto</option>
<option value="Noble">Noble</option>
<option value="Líder">Líder</option>
<option value="Defensor">Defensor</option>
<option value="Precavido">Precavido</option>
<option value="Orador">Orador</option>
<option value="Sagaz">Sagaz</option>
<option value="Aprendizaje rápido">Aprendizaje rápido</option>
<option value="Crematomano">Crematomano</option>
<option value="Regateador">Regateador</option>
<option value="Domador">Domador</option>
<optgroup label="Negativos">
<option value="En los huesos">En los huesos</option>
<option value="Débil">Débil</option>
<option value="Lento">Lento</option>
<option value="Vago">Vago</option>
<option value="Glotón">Glotón</option>
<option value="Sin reflejos">Sin reflejos</option>
<option value="Sin puntería">Sin puntería</option>
<option value="Torpe">Torpe</option>
<option value="Dócil">Dócil</option>
<option value="Honesto">Honesto</option>
<option value="Obstuto">Obstuto</option>
<option value="Mal oído">Mal oído</option>
<option value="Feo">Feo</option>
<option value="Estéril">Estéril</option>
<option value="Aprendizaje lento">Aprendizaje lento</option>
<option value="Testarudo">Testarudo</option>
<option value="Tartamudo">Tartamudo</option>
<option value="Disoluto">Disoluto</option>
<option value="Ceguera">Ceguera</option>
<option value="Enfermizo">Enfermizo</option>
</select>
<input type="text" disabled="" name="puntosrasgos" class="alin" value="" placeholder="Puntos de Rasgo [PR]"/>
<script>
$('.rasgos').on('change', function() {
var value =this.value;
if(value == 'Cuerpo grande')
{
$('.alin').val('-5');
}
if(value == 'Musculoso')
{
$('.alin').val('-5');
}
if(value == 'Ágil')
{
$('.alin').val('-5');
}
if(value == 'Con reflejos')
{
$('.alin').val('-6');
}
if(value == 'Preciso')
{
$('.alin').val('-6');
}
if(value == 'Afortunado')
{
$('.alin').val('-6');
}
if(value == 'Atento')
{
$('.alin').val('-4');
}
if(value == 'Agraciado')
{
$('.alin').val('-5');
}
if(value == 'Vivaz')
{
$('.alin').val('-4');
}
if(value == 'Culto')
{
$('.alin').val('-4');
}
if(value == 'Noble')
{
$('.alin').val('-4');
}
if(value == 'Líder')
{
$('.alin').val('-6');
}
if(value == 'Defensor')
{
$('.alin').val('-6');
}
if(value == 'Precavido')
{
$('.alin').val('-6');
}
if(value == 'Orador')
{
$('.alin').val('-5');
}
if(value == 'Sagaz')
{
$('.alin').val('-5');
}
if(value == 'Aprendizaje rápido')
{
$('.alin').val('-6');
}
if(value == 'Crematomano')
{
$('.alin').val('-4');
}
if(value == 'Regateador')
{
$('.alin').val('-4');
}
if(value == 'Domador')
{
$('.alin').val('-5');
}
if(value == 'En los huesos')
{
$('.alin').val('4');
}
if(value == 'Débil')
{
$('.alin').val('5');
}
if(value == 'Lento')
{
$('.alin').val('5');
}
if(value == 'Vago')
{
$('.alin').val('3');
}
if(value == 'Glotón')
{
$('.alin').val('3');
}
});
$(document).ready(function(){
//Chosen
$(".multipleChosen").chosen({
placeholder_text_multiple: "Rasgos" //placeholder
});
//Select2
$(".multipleSelect2").select2({
placeholder: "Rasgos" //placeholder
});
})
$('.multipleChosen.rasgos')
</script>
¡Muchísimas gracias, espero vuestra respuesta!