0

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!

3
  • Agrega aquí tu código por favor
    – user128299
    Commented el 19 abr. 2020 a las 1:49
  • Ya está añadido ^^ Commented el 19 abr. 2020 a las 1:58
  • Estás asignando un valor de cadena al total de puntos, en lugar de realizar operación matemática. Deberías obtener el total de puntos actual, agregar/restar puntos y actualizar el contenedor. Además, no has considerado lo que va a pasar cuando se elimine la selección.
    – Triby
    Commented el 19 abr. 2020 a las 2:30

1 respuesta 1

0

En vez de hacer una comparación para cada rasgo seleccionado, puedes crear un arreglo donde los incluyas todos con su respectivo valor. Al seleccionar / deseleccionar un elemento se va a disparar el evento onchange donde:

1- Estableces el total de puntos en cero
2- Seleccionas todos los valores
3- Recorres los valores y sumas los puntos
4- Asignas el total de puntos para mostrar

// Crear array con todas las opciones
const rasgos = {
    'Cuerpo grande': -5,
    'Musculoso': -5,
    'Ágil': -5,
    'Con reflejos': -6,
    'Preciso': -6,
    'Afortunado': -6,
    'Atento': -4,
    'Agraciado': -5,
    'Vivaz': -4,
    'Culto': -4,
    'Noble': -4,
    'Líder': -6,
    'Defensor': -6,
    'Precavido': -6,
    'Orador': -5,
    'Sagaz': -5,
    'Aprendizaje rápido': -6,
    'Crematomano': -4,
    'Regateador': -4,
    'Domador': -5,
    'En los huesos': 4,
    'Débil': 5,
    'Lento': 5,
    'Vago': 3,
    'Glotón': 3
    // Agrega los que faltan
};


// Evento onchange se dispara al seleccionar o deseleccionar opción
$('.rasgos').on('change', function() {
    // Establecer total de puntos a cero
    let puntos = 0;
    // Obtener todas las opciones seleccionadas
    let values = $('.rasgos').val();
    // Solo si se seleccionó al menos una opción
    if(values) {
        // Recorrer opciones seleccionadas
        values.forEach(function(value) {
            // Solo si existe en arreglo, para evitar errores
            if(rasgos[value]) {
                puntos += rasgos[value];
            }
        });
    }
    // Mostrar el total de puntos
    $('.alin').val(puntos);
});

$(document).ready(function(){
    //Chosen
    $(".multipleChosen").chosen({
        placeholder_text_multiple: "Rasgos" //placeholder
    });
    //Select2
    $(".multipleSelect2").select2({
		    placeholder: "Rasgos" //placeholder
    });
})

$('.multipleChosen.rasgos')
<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]"/>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.