Когда я настраиваю код, когда я генерирую связанный, так сказать, HTML, он не перечисляет все элементы выбора, только первый элемент в списке, когда я его выбираю. Я бы хотел, чтобы все они были выбраны, после которых следовал бы символ «а», а с последним - «у», например, «Робусто», «Ага и Гамильде» или «Робусто и Агиль».
С другой стороны С другой стороны, я хотел бы добавить ограничение на то, что значение итога, то есть последнее значение, будет 0-20, включая оба числа, но не выше.
И, наконец, добавление несовместимости между некоторыми параметрами Например, выбор функции «Robusto» будет несовместим с «En los huesos» и т. д. Спасибо.
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>