Ошибка с getElementById при использовании Multiselect + Несовместимость опций в Multiselect - PullRequest
Новая
       31

Ошибка с getElementById при использовании Multiselect + Несовместимость опций в Multiselect

0 голосов
/ 22 апреля 2020

Когда я настраиваю код, когда я генерирую связанный, так сказать, 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>
...