Una vez configuro el código, al generar el HTML asociado, por así decirlo, no me enumera la totalidad de elementos del select, únicamente el primer elemento en la lista al seleccionarlo. Me gustaría que se seleccionasen todos, seguidos de una , y con el último haya una "y", por ejemplo, Robusto, Delgado y Ingenuo, o, Robusto y Delgado.
Por otro lado, me gustaría añadir un límite de que el valor del total, es decir, el último valor, sea de 0-20, incluyendo ambos números, pero no mayor.
Y por último, añadir incompatibilidades entre algunas de las opciones, por ejemplo, al seleccionar el rasgo Robusto sería incompatible con En los huesos, y así. Gracias.
function generar() {
var rasgos = document.formu.rasgos.value;
var positivos = document.formu.positivos.value;
var negativos = document.formu.negativos.value;
var total = document.formu.total.value;
var code = ""+rasgos+"";
document.getElementById("code").innerHTML = code;
}
const select = document.querySelector('.multipleChosen');
const positivos = document.getElementById('positivos');
const negativos = document.querySelector('input[name=negativos]');
const total = document.querySelector('input[name=total]');
const errorMessage = document.getElementById('error-message');
$(document).ready(function() {
//Chosen
$(select).chosen({
placeholder_text_multiple: "Rasgos" //placeholder
}).change(calculate);
calculate();
})
function calculate() {
setTimeout(() => { // give the DOM time to update
let choices = [...document.querySelectorAll('.search-choice span')]
.map(choice => document.querySelector(`option[value='${choice.innerHTML}']`));
let positiveChoicesTotalCost = choices
.filter(choice => choice.dataset.cost < 0)
.reduce((sum, choice) => sum + Number(choice.dataset.cost), 10);
let negativeChoicesTotalCost = choices
.filter(choice => choice.dataset.cost > 0)
.reduce((sum, choice) => sum + Number(choice.dataset.cost), 0);
let z = positiveChoicesTotalCost + negativeChoicesTotalCost;
positivos.value = positiveChoicesTotalCost;
negativos.value = negativeChoicesTotalCost;
total.value = z;
if (z < 0) {
total.classList.add('error');
errorMessage.classList.add('show');
}
else {
total.classList.remove('error');
errorMessage.classList.remove('show');
}
}, 0);
}
<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"><meta charset="UTF-8" content="text/html" http-equiv="Content-Type" /><link href="https://fonts.googleapis.com/css?family=Libre+Franklin|ABeeZee|Open+Sans|Lora:800|Great+Vibes|UnifrakturCook:700|UnifrakturMaguntia&display=swap" type="text/css" rel="stylesheet" /><meta charset="UTF-8" content="text/html" http-equiv="Content-Type" />
<div class="imggene">
<div class="titlegene">
GENERADOR DE FICHA GOTRPG
</div>
</div>
<form method="POST" action="035-ejemplo-atributos-min-max-html5.php" name="formu" class="formu">
<select name="rasgos" class="multipleChosen " multiple="true">
<optgroup label="Positivos">
<option value="Robusto" data-cost="-5">Robusto</option>
<option value="Musculoso" data-cost="-5">Musculoso</option>
<option value="Ágil" data-cost="-5">Ágil</option>
<option value="Con reflejos" data-cost="-6">Con reflejos</option>
<option value="Preciso" data-cost="-6">Preciso</option>
<option value="Afortunado" data-cost="-6">Afortunado</option>
<option value="Atento" data-cost="-4">Atento</option>
<option value="Agraciado" data-cost="-5">Agraciado</option>
<option value="Vivaz" data-cost="-4">Vivaz</option>
<option value="Culto" data-cost="-4">Culto</option>
<option value="Noble" data-cost="-4">Noble</option>
<option value="Líder" data-cost="-6">Líder</option>
<option value="Defensor" data-cost="-6">Defensor</option>
<option value="Precavido" data-cost="-6">Precavido</option>
<option value="Orador" data-cost="-5">Orador</option>
<option value="Sagaz" data-cost="-5">Sagaz</option>
<option value="Aprendizaje rápido" data-cost="-6">Aprendizaje rápido</option>
<option value="Crematomano" data-cost="-4">Crematomano</option>
<option value="Regateador" data-cost="-4">Regateador</option>
<option value="Domador" data-cost="-5">Domador</option>
</optgroup>
<optgroup label="Negativos">
<option value="En los huesos" data-cost="4">En los huesos</option>
<option value="Débil" data-cost="5">Débil</option>
<option value="Lento" data-cost="5">Lento</option>
<option value="Vago" data-cost="3">Vago</option>
<option value="Glotón" data-cost="3">Glotón</option>
<option value="Sin reflejos" data-cost="6">Sin reflejos</option>
<option value="Sin puntería" data-cost="6">Sin puntería</option>
<option value="Torpe" data-cost="6">Torpe</option>
<option value="Dócil" data-cost="6">Dócil</option>
<option value="Honesto" data-cost="5">Honesto</option>
<option value="Obstuto" data-cost="3">Obstuto</option>
<option value="Mal oído" data-cost="4">Mal oído</option>
<option value="Feo" data-cost="3">Feo</option>
<option value="Estéril" data-cost="3">Estéril</option>
<option value="Aprendizaje lento" data-cost="6">Aprendizaje lento</option>
<option value="Testarudo" data-cost="4">Testarudo</option>
<option value="Tartamudo" data-cost="3">Tartamudo</option>
<option value="Disoluto" data-cost="3">Disoluto</option>
<option value="Ceguera" data-cost="7">Ceguera</option>
<option value="Enfermizo" data-cost="3">Enfermizo</option>
</optgroup>
</select>
<div class="puntosrasgos"><div class="col-six"><div class="titulopuntosrasgos">Puntos de Rasgos [PR]</div></div><div class="col-four"><div class="input-group">
<div class="col-rasgos"><p>
<label for="positivos" name="positivos"></label>
<input id="positivos" type="text" disabled="" name="positivos" class="alin" value="" placeholder="Positivos" /></p></div><div class="col-rasgos"><p><label for="negativos" name="negativos"></label>
<input id="negativos" type="text" disabled="" name="negativos" class="alin" value="" placeholder="Negativos" /></p></div><div class="col-rasgos"><p>
<label for="total" name="total"></label>
<input id="total" type="text" disabled="" name="total" class="alin" value="" placeholder="Total" />
</p></div></div></div><p id="error-message">
¡El último número (total) debe estar comprendido entre cero (0) o veinte (20)!
</p></div><input name="generar "class="boton" type="button" onclick="generar()" target="_parent" value="Generar" /><div class="codee"><textarea rows="8" id="code"></textarea></div></form></div>
</form>