Удалить ошибку при включении для выпадающего списка - PullRequest
Новая
       14

Удалить ошибку при включении для выпадающего списка

0 голосов
/ 30 ноября 2018

У меня есть простая форма HTML: 

<form>
    <select>
        <option value="" selected>Select an option</option>
        <option  value="Warrior">Warrior</option>
         <option value="Paladin">Paladin</option>
        <option value="Mage">Mage</option>
        <option value="Shaman">Shaman</option>
        <option value="Warlock">Warlock</option><option value="Priest">Priest</option><option value="Druid">Druid</option><option value="Hunter">Hunter</option>
       <option value="Rogue">Rogue</option>
       </select>
    <p></p>
<br>
    Stamina
    <br>
    <input type="number" name="stamina" placeholder="0" />
<br>
<span id="staminaresult"></span>

JS возвращает результат, используя inner.HTML, на основе ввода пользователя в поле ввода, но также вынуждает пользователя выбирать вариант из элемента select:

$("form").on('keyup change', function (e){
    e.preventDefault();
    var selectedValue =

// Stamina

$('select').val();
    var stamina = $('input[name=stamina]').val();

// Force class selection

    if (!selectedValue) {
        return alert('You must choose your class');
    }

// Stamina calculation

        stamina = stamina * 10;

// Stamina result   

  document.getElementById('staminaresult').innerHTML = ('+' + stamina + ' Hit Points')

Таким образом, если они .keyup в одном из полей ввода, не сделав выбор, они получают диалоговое окно с ошибкой.Работает как задумано.

Однако, когда пользователь затем идет и щелкает по полю выбора, чтобы исправить эту ошибку, он получает второй диалог об ошибке, потому что я думаю, что js регистрирует это как еще один .keyup!

Как я могу изменить свой код, чтобы отключить функцию .keyup для элемента select, чтобы пользователь не получил это второе диалоговое окно с сообщением об ошибке?

См. Jsfiddle здесь для полного контекста: https://jsfiddle.net/ejnLbyug/

Спасибо, T

1 Ответ

0 голосов
/ 30 ноября 2018

Проблема, с которой связан ваш обработчик: 

$("form").on('keyup change', function (e){

Это означает, что оба события keyup и change вызовут слушателя.Если происходит событие keyup, и ваш alert крадет фокус, фокус больше не будет на input, что приведет к событию change на входе.

Хотя вы можете это исправить, проверив,событие target является одним из ваших числовых полей ввода и немедленно возвращает значение, если это так, и если событие было change событием: 

$("form").on('change keyup', function (e){
  if (e.target.type === 'number' && e.type === 'change') {
    return;
  }


$("form").on('change keyup', function(e) {
  if (e.target.type === 'number' && e.type === 'change') {
    return;
  }
  e.preventDefault();
  var selectedValue =

    // Stamina

    $('select').val();
  var stamina = $('input[name=stamina]').val();

  // Force class selection

  if (!selectedValue) {
    return alert('You must choose your class');
  }

  // Stamina calculation

  stamina = stamina * 10;

  // Print class selection

  document.getElementById('classheader').innerHTML = (selectedValue);

  // Stamina result   

  document.getElementById('staminaresult').innerHTML = ('+' + stamina + ' Hit Points')

  // Strength - attack power calculation

  $('select').val();
  var strength = $('input[name=strength]').val();

  if (selectedValue === "Warrior") {
    strength = strength * 2;
  } else if (selectedValue === "Paladin") {
    strength = strength * 2;
  } else if (selectedValue === "Mage") {
    strength = strength * 2;
  } else if (selectedValue === "Shaman") {
    strength = strength * 2;
  } else if (selectedValue === "Warlock") {
    strength = strength * 2;
  } else if (selectedValue === "Priest") {
    strength = strength * 2;
  } else if (selectedValue === "Druid") {
    strength = strength * 2;
  } else if (selectedValue === "Hunter") {
    strength = strength * 1;
  } else {
    strength = strength * 1;
  }

  // Strength - subsequent DPS calculation

  $('select').val();
  var strengthdps = $('input[name=strength]').val();

  strengthdps = strength / 14;
  strengthdps = strengthdps.toFixed(2);

  // Strength - attack power result

  document.getElementById('strengthresult').innerHTML = ('+' + strength + ' Melee Attack Power' + ' (+' + strengthdps + ' DPS)')

  // Strength - block calculation

  $('select').val();
  var strengthblock = $('input[name=strength]').val();

  if (selectedValue === "Warrior") {
    strengthblock = strengthblock / 20;
  } else if (selectedValue === "Paladin") {
    strengthblock = strengthblock / 20;
  } else if (selectedValue === "Shaman") {
    strengthblock = strengthblock / 20;
  } else {
    strengthblock = 0;
  }

  strengthblock = strengthblock.toFixed(2);

  // Strength - block result

  document.getElementById('strengthblockresult').innerHTML = (', +' + strengthblock + ' Block')

  // Agility - attack power calculation

  $('select').val();
  var agility = $('input[name=agility]').val();

  if (selectedValue === "Hunter") {
    agility = agility * 1;
  } else if (selectedValue === "Rogue") {
    agility = agility * 1;
  } else {
    agility = 0;
  }

  // Agility - subsequent DPS calculation

  $('select').val();
  var agilitydps = $('input[name=agility]').val();

  agilitydps = agility / 14;
  agilitydps = agilitydps.toFixed(2);

  // Agility - attack power result

  document.getElementById('agilityresult').innerHTML = ('+' + agility + ' Melee Attack Power' + ' (+' + agilitydps + ' DPS)')

  // Agility - cat attack power calculation

  $('select').val();
  var agilitycat = $('input[name=agility]').val();

  if (selectedValue === "Druid") {
    agilitycat = agilitycat * 1;
  } else {
    agilitycat = 0;
  }

  // Agility - cat subsequent DPS calculation

  $('select').val();
  var agilitydpscat = $('input[name=agility]').val();

  agilitydpscat = agilitycat / 14;
  agilitydpscat = agilitydpscat.toFixed(2);

  // Agility - cat attack power result

  document.getElementById('agilitycatresult').innerHTML = (', +' + agilitycat + ' Melee Attack Power (in Cat Form)' + ' (+' + agilitydpscat + ' DPS)')

  // Agility - ranged attack power calculation

  $('select').val();
  var agilityranged = $('input[name=agility]').val();

  if (selectedValue === "Hunter") {
    agilityranged = agilityranged * 2;
  } else {
    agilityranged = 0;
  }

  // Agility - ranged subsequent DPS calculation

  $('select').val();
  var agilitydpsranged = $('input[name=agility]').val();

  agilitydpsranged = agilityranged / 14;
  agilitydpsranged = agilitydpsranged.toFixed(2);

  // Agility - ranged attack power result

  document.getElementById('agilityrangedresult').innerHTML = (', +' + agilityranged + ' Ranged Attack Power' + ' (+' + agilitydpsranged + ' DPS)')

  // Agility - crit calculation

  $('select').val();
  var agilitycrit = $('input[name=agility]').val();

  if (selectedValue === "Hunter") {
    agilitycrit = agilitycrit / 53;
  } else if (selectedValue === "Rogue") {
    agilitycrit = agilitycrit / 29;
  } else {
    agilitycrit = agilitycrit / 20;
  }

  agilitycrit = agilitycrit.toFixed(2);

  // Agility - crit result

  document.getElementById('agilitycritresult').innerHTML = (', +' + agilitycrit + '% Crit')

  // Agility - dodge calculation

  $('select').val();
  var agilitydodge = $('input[name=agility]').val();
  if (selectedValue === "Hunter") {
    agilitydodge = agilitydodge / 26.5;
  } else if (selectedValue === "Rogue") {
    agilitydodge = agilitydodge / 14.5;
  } else {
    agilitydodge = agilitydodge / 20;
  }

  agilitydodge = agilitydodge.toFixed(2);

  // Agility - dodge result

  document.getElementById('agilitydodgeresult').innerHTML = (', +' + agilitydodge + '% Dodge')

  // Agility - armor calculation

  $('select').val();
  var agilityarmor = $('input[name=agility]').val();

  agilityarmor = agilityarmor * 2;

  // Agility - armor result

  document.getElementById('agilityarmorresult').innerHTML = (', +' + agilityarmor + ' Armor')

  // Intellect - mana calculation

  $('select').val();
  var intellect = $('input[name=intellect]').val();

  if (selectedValue === "Rogue") {
    intellect = 0;
  } else if (selectedValue === "Warrior") {
    intellect = 0;
  } else {
    intellect = intellect * 15;
  }

  // Intellect - mana result

  document.getElementById('intellectresult').innerHTML = ('+' + intellect + '  Mana')

  // Intellect - crit calculation

  $('select').val();
  var intellectcrit = $('input[name=intellect]').val();

  if (selectedValue === "Warlock") {
    intellectcrit = intellectcrit / 60.6;
  } else if (selectedValue === "Druid") {
    intellectcrit = intellectcrit / 60;
  } else if (selectedValue === "Mage") {
    intellectcrit = intellectcrit / 59.5;
  } else if (selectedValue === "Shaman") {
    intellectcrit = intellectcrit / 59.5;
  } else if (selectedValue === "Priest") {
    intellectcrit = intellectcrit / 59.2;
  } else if (selectedValue === "Paladin") {
    intellectcrit = intellectcrit / 29.5;
  } else {
    intellectcrit = intellectcrit / 20;
  }

  intellectcrit = intellectcrit.toFixed(2);

  // Intellect - crit result

  document.getElementById('intellectcritresult').innerHTML = (', +' + intellectcrit + '  % Crit')

  // Spirit - mana regen calculation

  $('select').val();
  var spiritmana = $('input[name=spirit]').val();

  if (selectedValue === "Druid") {
    spiritmana = 15 + (spiritmana / 5);
  } else if (selectedValue === "Hunter") {
    spiritmana = 15 + (spiritmana / 5);
  } else if (selectedValue === "Paladin") {
    spiritmana = 15 + (spiritmana / 5);
  } else if (selectedValue === "Shaman") {
    spiritmana = 15 + (spiritmana / 5);
  } else if (selectedValue === "Mage") {
    spiritmana = 13 + (spiritmana / 4);
  } else if (selectedValue === "Priest") {
    spiritmana = 13 + (spiritmana / 4);
  } else if (selectedValue === "Warlock") {
    spiritmana = 8 + (spiritmana / 4);
  } else {
    spiritmana = 0;
  }

  spiritmana = spiritmana.toFixed(2);

  // Spirit - mana regen result

  document.getElementById('spiritmanaresult').innerHTML = ('+' + spiritmana + '  Mana per Tick')

  // Spirit - health regen calculation

  $('select').val();
  var spirithealth = $('input[name=spirit]').val();

  if (selectedValue === "Druid") {
    spirithealth = 0.09 * (spirithealth + 6.5);
  } else if (selectedValue === "Hunter") {
    spirithealth = 0.25 * (spirithealth + 6);
  } else if (selectedValue === "Paladin") {
    spirithealth = 0.25 * (spirithealth + 6);
  } else if (selectedValue === "Shaman") {
    spirithealth = 0.11 * (spirithealth + 7);
  } else if (selectedValue === "Mage") {
    spirithealth = 0.1 * (spirithealth + 6);
  } else if (selectedValue === "Priest") {
    spirithealth = 0.1 * (spirithealth + 6.5);
  } else if (selectedValue === "Warlock") {
    spirithealth = 0.07 * (spirithealth + 6);
  } else if (selectedValue === "Warrior") {
    spirithealth = 0.8 * (spirithealth + 6);
  } else {
    spirithealth = 0.5 * (spirithealth + 2);
  }

  spirithealth = spirithealth.toFixed(2);

  // Spirit - health regen result

  if (spirithealth === 0) {
    return;
  } else {
    document.getElementById('spirithealthresult').innerHTML = ('+' + spirithealth + ' Health per Tick')
  }


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select>
    <option value="" selected>Select an option</option>
    <option value="Warrior">Warrior</option>
    <option value="Paladin">Paladin</option>
    <option value="Mage">Mage</option>
    <option value="Shaman">Shaman</option>
    <option value="Warlock">Warlock</option>
    <option value="Priest">Priest</option>
    <option value="Druid">Druid</option>
    <option value="Hunter">Hunter</option>
    <option value="Rogue">Rogue</option>
  </select>
  <p></p>
  <br> Stamina
  <br>
  <input type="number" name="stamina" placeholder="0" />
  <br> Strength
  <br>
  <input type="number" name="strength" placeholder="0" />
  <br> Agility
  <br>
  <input type="number" name="agility" placeholder="0" />
  <br> Intellect
  <br>
  <input type="number" name="intellect" placeholder="0" />
  <br> Spirit
  <br>
  <input type="number" name="spirit" placeholder="0" />

  <p></p>
</form>

<p id="classheader">
</p>

Stamina:

<span id="staminaresult">
</span>
<br><br> Strength:

<span id="strengthresult"></span><span id="strengthblockresult"></span>
<br>
<br> Agility:

<span id="agilityresult">
</span><span id="agilitycatresult">
</span>
<span id="agilityrangedresult">
</span>
<span id="agilitycritresult">
</span>
<span id="agilitydodgeresult">
</span>
<span id="agilityarmorresult">
</span>
<br>
<br> Intellect:

<span id="intellectresult">
</span>
<span id="intellectcritresult">
</span>
<br>
<br> Spirit:

<span id="spiritmanaresult">
</span>
<span id="spirithealthresult">
</span>
<br>
<br>

Было бы более элегантно использовать правильный модал вместо alert, что очень неудобно для пользователя (крадет фокус, блоки * 1026)* и т. д.)

...