Блог

Главная - Вопросы по программированию - Добавление двух значений во входные данные без перезаписи друг друга

Добавление двух значений во входные данные без перезаписи друг друга

#javascript #jquery

#javascript #jquery

Вопрос:

Добрый день.

Я разрабатываю некоторый код javascript, но у меня проблема. Я пытаюсь получить две величины, чтобы добавить к одному входу.

В принципе, идея заключается в том, что когда вы вводите, например, ‘Brujas y brujos’ и ‘Nivel nato’, а затем добавляете ‘ 5 MAG’ вместо только значения 5 в ‘Magia’, к предыдущему значению (в данном случае 10) также будет добавлено 15. И так со всей статистикой, то есть ‘Fuerza’, ‘Magia’, ‘Resistencia’, ‘Velocidad’ и ‘Vitalidad’.

Я оставляю на данный момент то, что я сделал:

 // stats i
$('.raza,.nivel').on('change', function() {
    const raza = $('.raza').val(); // Should return a key for the race, like 'brujas'
    const nivel = $('.nivel').val(); // Should return an index for the level, like '0'
    const stat = stats[raza]; // Get the race from stats

    // Set all stat values
    $('.fue').val(stat.fue[nivel]);
    $('.mag').val(stat.mag[nivel]);
    $('.res').val(stat.res[nivel]);
    $('.vel').val(stat.vel[nivel]);
    $('.vit').val(stat.vit[nivel]);
});

// stats ii
// Object with all races and levels
const stats = {
    // Create object for each race
    brujas: {
         // An array of values for each level for each stat
        fue: [6,  8,  10, 12],
        mag: [10, 20, 30, 40],
        res: [2,  4,  6 , 8],
        vel: [2,  3,  4 , 5],
        vit: [55, 65, 80, 90],
    },
     eva: {
        fue: [7,  9,  11, 13],
        mag: [0, 0, 0, 0],
        res: [3,  5,  7 , 9],
        vel: [2,  3,  4 , 5],
        vit: [50, 60, 70, 85],
    },
  humanos: {
        fue: [7,  9,  11, 13],
        mag: [0, 0, 0, 0],
        res: [2,  4,  6 , 8],
        vel: [1,  2,  3 , 4],
        vit: [35, 45, 55, 65],
    },
  licantropos: {
        fue: [7,  9,  11, 13],
        mag: [0, 0, 0, 0],
        res: [3,  5,  7 , 9],
        vel: [3,  4,  5 , 6],
        vit: [55, 65, 80, 90],
    },
  
  sirenas: {
        fue: [6,  8,  10, 12],
        mag: [0, 0, 0, 0],
        res: [2,  4,  6 , 8],
        vel: [3,  4,  5 , 6],
        vit: [55, 65, 80, 90],
    },
 vampiros: {
        fue: [14,  18,  22, 26],
        mag: [0, 0, 0, 0],
        res: [6,  8,  10 , 12],
        vel: [5,  6,  7 , 8],
        vit: [85, 100, 115, 130],
    },
};

// puntos de stats por nivel
$(document).ready(function() {
  $('.nivel').on('change', function() {
    var value = this.value;
    if (value == '0') {
      $('.ps').val('10');
    }
    if (value == '1') {
      $('.ps').val('20');
    }
    if (value == '2') {
      $('.ps').val('30');
    }
     if (value == '3') {
      $('.ps').val('40');
    }
    $('.ps').change();
  });
  $('.select').on("change", function() {
    var total = 0;
    $('.select').each(function() {
      var price = parseFloat($(this).find("option:selected").data("price"));
      console.log(price);
      total  = price;
    });
    $("#opt_price").val(total.toFixed(0))
      .change(); // Trigger
  });

});


// suma de stats
//fuerza
function updateFuerzaInputValue(){
  //Get the input value
  var inputValue = document.getElementById("fuerzaselect").value;
  
  //Update the input value in the input box
  document.getElementById("fue").value = inputValue;
}

//magia
function updateMagiaInputValue(){
  //Get the input value
  var inputValue = document.getElementById("magiaselect").value;
  
  //Update the input value in the input box
  document.getElementById("mag").value = inputValue
}

//resistencia
function updateResistenciaInputValue(){
  //Get the input value
  var inputValue = document.getElementById("resistenciaselect").value;
  
  //Update the input value in the input box
  document.getElementById("res").value = inputValue
}

//velocidad
function updateVelocidadInputValue(){
  //Get the input value
  var inputValue = document.getElementById("velocidadselect").value;
  
  //Update the input value in the input box
  document.getElementById("vel").value = inputValue
}

//vitalidad
function updateVitalidadInputValue(){
  //Get the input value
  var inputValue = document.getElementById("vitalidadselect").value;
  
  //Update the input value in the input box
  document.getElementById("vit").value = inputValue
}

// suma de stats final
///// fuerza
 $(".fuea2, .fueb2").on("keydown keyup change", function(event) { // <--- Respond to change event, too
    var tr = $(this).closest("fuetr"); //we will use this to restrict scope to the current table row
    tr.find(".fuec2").val(Number(tr.find(".fuea2").val())   Number(tr.find(".fueb2").val()));
  });  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css"><script src="
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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">


<meta charset="UTF-8" content="text/html" http-equiv="Content-Type" /><form method="POST" action="035-ejemplo-atributos-min-max-html5.php" name="formu" class="formu"><div style="" class="row"><div style="font-style: normal;font-weight: 700;text-transform: uppercase;background: #121212;border-bottom: 1px solid #0A0A0A;outline: 1px solid #0A0A0A; border-top: 1px solid #0a0a0a; outline-offset: -20px;border: 20px solid #181818;box-shadow: 0 0 0 1px #0A0A0A;height: 69px;"><div style="padding: 10px;font-style: normal;font-weight: 700;text-transform: uppercase;color: #8A8A8A;font-family: source code pro;font-size: 11px;text-align: center;text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;"><table><tbody><tr><td><div style="height: 40px;width: 40px;background: #151515;border: 1px solid #0a0a0a;text-shadow: 1px 1px 0 #0A0A0A, -1px 1px #0A0A0A, 1px -1px 0 #0A0A0A, -1px -1px #0A0A0A;color: #352534;display: flex;justify-content: center;align-items: center;float: left;"><i class="fas fa-chess" style="font-size: 15px"></i></span></div><div style="height: 40px;width: 255px;text-transform: uppercase;border: 1px solid #0A0A0A;background: #111;font-weight: 700;text-align: center;line-height: 40px;"><select class="raza fueb2" style="max-width: 390px!important; border: none; padding: 10px 90px 10px 0px;"><option hidden value="" disabled selected>Raza</option><option value="brujas">Brujas y brujos</option>
 <option value="eva">Hijos de Eva</option>
   <option value="humanos">Humanos</option>
 <option value="licantropos">Licántropos</option>
 <option value="sirenas">Sirenas y tritones</option>
<option value="vampiros">Vampiros</option>
  </select></div></td><td><div style="height: 40px;width: 40px;background: #151515;border: 1px solid #0a0a0a;text-shadow: 1px 1px 0 #0A0A0A, -1px 1px #0A0A0A, 1px -1px 0 #0A0A0A, -1px -1px #0A0A0A;color: #352534;display: flex;justify-content: center;align-items: center;float: left;"><i class="fas fa-flag" style="font-size: 15px"></i></span></div><div style="height: 40px;width: 255px;text-transform: uppercase;border: 1px solid #0A0A0A;background: #111;font-weight: 700;text-align: center;line-height: 40px;"><select class="nivel fueb2" style="max-width: 390px!important; border: none; padding: 10px 90px 10px 0px;"><option hidden value="" disabled selected>Nivel</option><option value="0">Nivel nato</option>
    <option value="1">Nivel primario</option>
    <option value="2">Nivel medio</option>
    <option value="3">Nivel total</option>
  </select></div></td></tr></tbody></table></div></div>
    
        <div style="padding: 10px; border-top: 1px solid #0a0a0a; text-transform: uppercase; background: #111; border-bottom: 1px solid #0a0a0a;"><table style=" display: flex; justify-content: center; align-items: center; "><tbody><tr><td><div class="stats" style=" width: 90px; "><input id="fue" type="text" class="fue fuec2" value="" placeholder="0"> Fuerza</div></td><td><div class="stats" style=" width: 90px; "><input id="mag" type="text" class="mag" value="" placeholder="0"> Magia</div></td><td><div class="stats"><input id="res" type="text" class="res" value="" placeholder="0"> Resistencia</div></td><td><div class="stats" style="width: 120px;"><input id="vel" type="text" class="vel" value="" placeholder="0"> Velocidad</div></td><td><div class="stats" style=" width: 115px; "><input id="vit" type="text" class="vit" value="" placeholder="0"> Vitalidad</div></td></tr></tbody></table></div>
          
    <div style="display: none"><input type="number" name="edad" placeholder="Edad" id="edad"/></div>
    
<div style="font-style: normal;font-weight: 700;text-transform: uppercase;background: #121212;border-bottom: 1px solid #0A0A0A;outline: 1px solid #0A0A0A;border-top: 1px solid #0a0a0a;outline-offset: -15px;border: 15px solid #181818;box-shadow: 0 0 0 1px #0A0A0A;"><table style="
    padding: 5px;
"><tbody><tr><td><div style="height: 30px;width: 30px;background: #151515;border: 1px solid #0a0a0a;text-shadow: 1px 1px 0 #0A0A0A, -1px 1px #0A0A0A, 1px -1px 0 #0A0A0A, -1px -1px #0A0A0A;color: #352534;display: flex;justify-content: center;align-items: center;float: left;"><i class="fas fa-fist-raised" style="font-size: 15px"></i></div><div style="height: 30px;width: 95px;text-transform: uppercase;border: 1px solid #0A0A0A;background: #111;font-weight: 700;text-align: center;line-height: 30px;"><select class="select fuerza fuea2" id="fuerzaselect" onchange="updateFuerzaInputValue()" style="
    border: none;
    padding: 0;
">
<option hidden="" disabled="" selected="" data-price="0" value="Fuerza">Fuerza</option>
<option data-price="0" value="0">0</option>
<option data-price="-2" value="1"> 1 FUE</option>
<option data-price="-4" value="2"> 2 FUE</option>
<option data-price="-6" value="3"> 3 FUE</option>
<option data-price="-8" value="4"> 4 FUE</option>
<option data-price="-10" value="5"> 5 FUE</option>
<option data-price="-12" value="6"> 6 FUE</option>
<option data-price="-14" value="7"> 7 FUE</option>
<option data-price="-16" value="8"> 8 FUE</option>
<option data-price="-18" value="9"> 9 FUE</option>
<option data-price="-20" value="10"> 10 FUE</option>
<option data-price="-22" value="11"> 11 FUE</option>
<option data-price="-24" value="12"> 12 FUE</option>
<option data-price="-26" value="13"> 13 FUE</option>
<option data-price="-28" value="14"> 14 FUE</option>
<option data-price="-30" value="15"> 15 FUE</option>
<option data-price="-32" value="16"> 16 FUE</option>
<option data-price="-34" value="17"> 17 FUE</option>
<option data-price="-36" value="18"> 18 FUE</option>
<option data-price="-38" value="19"> 19 FUE</option>
<option data-price="-40" value="20"> 20 FUE</option>
</select></div></td><td><div style="height: 30px;width: 30px;background: #151515;border: 1px solid #0a0a0a;text-shadow: 1px 1px 0 #0A0A0A, -1px 1px #0A0A0A, 1px -1px 0 #0A0A0A, -1px -1px #0A0A0A;color: #352534;display: flex;justify-content: center;align-items: center;float: left;"><i class="fas fa-hand-sparkles" style="font-size: 15px"></i></div><div style="height: 30px;width: 95px;text-transform: uppercase;border: 1px solid #0A0A0A;background: #111;font-weight: 700;text-align: center;line-height: 30px;"><select class="select magia" id="magiaselect" onchange="updateMagiaInputValue()" style="
    border: none;
    padding: 0;
">
<option hidden="" disabled="" selected="" data-price="0" value="Magia">Magia</option>
<option data-price="0" value="0">0</option>
<option data-price="-2" value="1"> 1 MAG</option>
<option data-price="-4" value="2"> 2 MAG</option>
<option data-price="-6" value="3"> 3 MAG</option>
<option data-price="-8" value="4"> 4 MAG</option>
<option data-price="-10" value="5"> 5 MAG</option>
<option data-price="-12" value="6"> 6 MAG</option>
<option data-price="-14" value="7"> 7 MAG</option>
<option data-price="-16" value="8"> 8 MAG</option>
<option data-price="-18" value="9"> 9 MAG</option>
<option data-price="-20" value="10"> 10 MAG</option>
<option data-price="-22" value="11"> 11 MAG</option>
<option data-price="-24" value="12"> 12 MAG</option>
<option data-price="-26" value="13"> 13 MAG</option>
<option data-price="-28" value="14"> 14 MAG</option>
<option data-price="-30" value="15"> 15 MAG</option>
<option data-price="-32" value="16"> 16 MAG</option>
<option data-price="-34" value="17"> 17 MAG</option>
<option data-price="-36" value="18"> 18 MAG</option>
<option data-price="-38" value="19"> 19 MAG</option>
<option data-price="-40" value="20"> 20 MAG</option></select></div></td><td><div style="height: 30px;width: 30px;background: #151515;border: 1px solid #0a0a0a;text-shadow: 1px 1px 0 #0A0A0A, -1px 1px #0A0A0A, 1px -1px 0 #0A0A0A, -1px -1px #0A0A0A;color: #352534;display: flex;justify-content: center;align-items: center;float: left;"><i class="fas fa-shield-alt" style="font-size: 15px"></i></div><div style="height: 30px;width: 117px;text-transform: uppercase;border: 1px solid #0A0A0A;background: #111;font-weight: 700;text-align: center;line-height: 30px;"><select class="select resistencia" id="resistenciaselect" onchange="updateResistenciaInputValue()" style="
    border: 0;
    padding: 0;
">
<option hidden="" disabled="" selected="" data-price="0" value="Resistencia">Resistencia</option>
<option data-price="0" value="0">0</option>
<option data-price="-5" value="1"> 1 RES</option>
<option data-price="-10" value="2"> 2 RES</option>
<option data-price="-15" value="3"> 3 RES</option>
<option data-price="-20" value="4"> 4 RES</option>
<option data-price="-25" value="5"> 5 RES</option></select></div></td><td><div style="height: 30px;width: 30px;background: #151515;border: 1px solid #0a0a0a;text-shadow: 1px 1px 0 #0A0A0A, -1px 1px #0A0A0A, 1px -1px 0 #0A0A0A, -1px -1px #0A0A0A;color: #352534;display: flex;justify-content: center;align-items: center;float: left;"><i class="fas fa-running" style="font-size: 15px"></i></div><div style="height: 30px;width: 106px;text-transform: uppercase;border: 1px solid #0A0A0A;background: #111;font-weight: 700;text-align: center;line-height: 30px;"><select class="select velocidad" id="velocidadselect" onchange="updateVelocidadInputValue()" style="
    border: 0;
    padding: 0;
">
<option hidden="" disabled="" selected="" data-price="0" value="Velocidad">Velocidad</option>
<option data-price="0" value="0">0</option>
<option data-price="-5" value="1"> 1 VEL</option>
<option data-price="-10" value="2"> 2 VEL</option>
<option data-price="-15" value="3"> 3 VEL</option>
<option data-price="-20" value="4"> 4 VEL</option>
<option data-price="-25" value="5"> 5 VEL</option></select></div></td><td><div style="height: 30px;width: 30px;background: #151515;border: 1px solid #0a0a0a;text-shadow: 1px 1px 0 #0A0A0A, -1px 1px #0A0A0A, 1px -1px 0 #0A0A0A, -1px -1px #0A0A0A;color: #352534;display: flex;justify-content: center;align-items: center;float: left;"><i class="fas fa-heart" style="font-size: 15px"></i></div><div style="height: 30px;width: 106px;text-transform: uppercase;border: 1px solid #0A0A0A;background: #111;font-weight: 700;text-align: center;line-height: 30px;"><select class="select vitalidad" id="vitalidadselect" onchange="updateVitalidadInputValue()" style="
    padding: 0;
    border: 0;
">
<option hidden="" disabled="" selected="" data-price="0" value="Vitalidad">Vitalidad</option>
<option data-price="0" value="0">0</option>
<option data-price="-1" value="5"> 5 VIT</option>
<option data-price="-2" value="10"> 10 VIT</option>
<option data-price="-3" value="15"> 15 VIT</option>
<option data-price="-4" value="20"> 20 VIT</option>
<option data-price="-5" value="25"> 25 VIT</option>
<option data-price="-6" value="30"> 30 VIT</option>
<option data-price="-7" value="35"> 35 VIT</option>
<option data-price="-8" value="40"> 40 VIT</option></select></div></td></tr></tbody></table></div></div></div></div>

Что я мог сделать?

Комментарии:

1. Можете ли вы подробнее рассказать о том, чего вы хотите достичь здесь? В настоящее время это сложно понять.

2. Я пробовал несколько раз, но на самом деле это не работает.

3. что не работает? добавьте также необходимую операцию.

4. то, что я пробовал, находится в нижней части javascript, ‘// suma de stats final». Я пробовал, что там, где он помещает ‘Fuerza’, добавляются суммы, которые можно разместить, и они не изменяются при вводе выбора.

5. Ваш селектор неправильный, он должен быть $(document).on("keydown keyup change",".fuea2 , .fueb2", function(event) {.. а также используйте var tr = $(this).closest("table"); и посмотрите, работает ли это