Проблема с множественным выбором при генерации кода HTML с выбранными значениями - PullRequest
Новая
       30

Проблема с множественным выбором при генерации кода HTML с выбранными значениями

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

Я создал генератор кода HTML, через JS, где после помещения «Rasgos» в определенный раздел и под конец кода для генерации кода HTML выбирается только первый «Ras go» отображается независимо от того, сколько вы выбрали.

Еще один вопрос, как добавить несовместимость при выборе функций? Например, 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 = "<b>Rasgos -</b> "+rasgos+"<br><b>Puntos de Rasgos [PR] -</b> "+positivos+"/"+negativos+"/"+total+"";

	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);
}
input, input[type="radio"] + label, input[type="checkbox"] + label:before, select option, select {    font: 12px 'Lora';
    letter-spacing: 1px;
    background: #161616 !important;
  margin: 2px;
    color: #C0C0C0;
    border: 1px solid #191919;
    border-radius: 3px;
    transition: all 0.35s ease-in-out;
    width: -webkit-fill-available;
    padding: 1em;
    line-height: 1.4;
  transition: all 0.35s ease-in-out;}

.chosen-container-multi .chosen-choices {
    background: #161616 !important;
  margin: 2px;
    color: #C0C0C0;
    border: 1px solid #191919!important;
    border-radius: 3px;
    transition: all 0.35s ease-in-out;
    width: -webkit-fill-available;
    padding: 0.8em;
    line-height: 1.4;
  transition: all 0.35s ease-in-out; padding: 0.3em 0.5em 0.5em 1em!important;
    line-height: 1.4!important}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {color: #AC882D!important; font: 12px 'Lora'!important; font-size: 12px!important;
    letter-spacing: 1px!important}

textarea:focus {
    outline: 0;
    border-color: #AC882D;
}

.col-two {
    width: 50%; display: inline-block; margin: -2.4px;
}

.boton {cursor: pointer; display: inline-block; padding: 15px; font: 800 14px/100% lora; text-transform: uppercase; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; font-family: open sans condensed; text-transform: uppercase; font-weight: 700; color: #AB882E; letter-spacing: 1px; margin: -20px; margin-top: 10px; border-radius: 0; border-color: #161616}
#total.error {
  border: 1px solid #AC882D;
}

#error-message {
  display: none;
  color: #fff;
}

#error-message.show {
  display: block; background: #AC882D;
}

.chosen-container-multi .chosen-choices li.search-choice {
    border: 1px solid #AC882D!important;
    border-radius: 3px;
    background-color: #AC882D!important;
    background-image: none!important;
    box-shadow: none!important;
    color: #fff!important;
    font-family: lora!important;
    font-size: 10px!important;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {background: url(https://i.imgur.com/nQLsOnH.png)  -42px 1px no-repeat; filter: brightness(5)}

.chosen-container-active .chosen-choices {border: 1px solid #AC882D!important;
    box-shadow: none!important}

.col-rasgos {width:15%; line-height: 0px;
    display: inline-block}
.col-rasgos input {color: #AC882D; padding: 5px 10px}

.puntosrasgos {background: #161616; border: 1px solid #191919; border-radius: 3px; margin: 2px}

.titulopuntosrasgos {color: #AC882D!important;
    font: 12px 'Lora'!important; letter-spacing: 1px; display: inline-block}

.col-six {width: 48%;
    display: inline-block; text-align: left}
.col-four {width: 48%;
    display: inline-block; text-align: right}

.chosen-container .chosen-drop {background: #171717!important;
    box-shadow: 0 3px 5px rgba(1,1,1,0.5)!important;
    border-radius: 0 0 5px 5px; border: 0!important; opacity: 0.99}

.chosen-container .chosen-results::-webkit-scrollbar {
    width: 4px;
    background-color: #1F1F1F;
    border: 1px solid #1A1A1A;
}

.chosen-container .chosen-results::-webkit-scrollbar-thumb {
    background-color: #AB882E;
}

.chosen-container .chosen-results li.highlighted {background: #AC882D!important}

.chosen-container .chosen-results li.group-result {color: #AC882D!important; font-size: 12px; font-weight: bold!important}

.chosen-container .chosen-results {color: #ddd!important;     text-align: left; font-family: "lora"!important; font-size: 11px!important}
<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="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 class="boton" type="button" onclick="generar()" target="_parent" value="Generar" /><div class="codee"><textarea rows="8" id="code"></textarea>

PS. Код «Генерировать» не выдаёт мне ошибок, но не позволяет скопировать весь код из-за недостатка места.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...