Кто в стипендии? Когда Фродо и остальная часть банды вместе

В качестве варианта концепции fizzbuzz и упражнения для изучения JavaScript, HTML5 и CSS (я не знаю их очень хорошо).

Регулярный fizzbuzz несколько устал, но наличие веб-визуализируемого вывода кажется полезным и возможность корректировать входные данные по желанию, позволяет вам увидеть влияние изменений модуля.

 var fizzLoaded = false;
var fizzDiv, fizzFrom, fizzTo, fizzPlayers;

function fizzLoad() {
  if (fizzLoaded) {
    return;
  }
  fizzLoaded = true;
  var fizzForm = document.getElementById('fizzbuzz');
  fizzFrom = document.getElementById('rangeFrom');
  fizzTo = document.getElementById('rangeTo');
  fizzPlayers = [
    document.getElementById('frodo'),
    document.getElementById('sam'),
    document.getElementById('merry'),
    document.getElementById('pippin'),
    document.getElementById('bilbo')
  ];
  fizzDiv = document.getElementById('fizzOut');
}

function restrictRange() {
  var rFrom = parseInt(fizzFrom.value);
  var rTo = parseInt(fizzTo.value);
  fizzTo.min = rFrom;
  fizzFrom.max = rTo;
}

function validateValues() {
  var rFrom = parseInt(fizzFrom.value);
  var rTo = parseInt(fizzTo.value);
  if (rTo < rFrom) {
    alert("Illegal range from " + rFrom + " to " + rTo);
    return false;
  }
  for (var i = 0; i < fizzPlayers.length; i++) {
    var val = parseInt(fizzPlayers[i].value);
    if (val < 0 || val > 100) {
      alert("Illegal value " + val + " for player " + fizzPlayers[i].id);
      return false;
    }
  }
  return true;
}

function capitaliseFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
}

function fizzing() {
  fizzLoad();
  restrictRange();
  if (!validateValues()) {
    fizzDiv.innerHTML = "Illegal inputs";
    return;
  }

  var table = "";
  var rFrom = parseInt(fizzFrom.value);
  var rTo = parseInt(fizzTo.value);
  var active = [];
  var actfact = [];
  var actname = [];
  var player;

  for (var i = 0; i < fizzPlayers.length; i++) {
    player = fizzPlayers[i];
    var val = parseInt(player.value);
    if (val != 0) {
      active.push(player);
      actfact.push(parseInt(player.value));
      actname.push(capitaliseFirstLetter(player.id));
    }
  }

  table += "<table>\n";
  table += "  <tr><th>Value</th><th>Message</th></tr>\n";
  for (var i = rFrom; i <= rTo; i++) {

    var msg = "";
    for (var p = 0; p < active.length; p++) {
      if (i % actfact[p] == 0) {
        msg += actname[p];
      }
    }
    if (msg == "") {
      msg = "" + i;
    }
    table += "  <tr><td>" + i + "</td><td>" + msg + "</td></tr>\n";
  }
  table += "</table>\n";

  fizzDiv.innerHTML = table;
}
 h1 {
    clear: left;
}

hr {
    clear: left;
}

label {
    display: inline-block;
    float: left;
    clear: left;
    width: 150px;
    text-align: left;
}
input {
  display: inline-block;
  float: right;
  text-align: right;
  padding-left:10px;
  width: 50px;
}
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>FizzBuzz</title>
    <link rel="stylesheet" href="fizzbuzz.css">
    <script src="fizzbuzz.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>Config</h1>
    <form id="fizzbuzz">
      <fieldset id="fizzControl" oninput="fizzing();">
        <label>Range From<input id="rangeFrom" type="number" min="1" max="100" value="1" required></label>
        <label>Range To<input id="rangeTo"   type="number" min="1" max="1024" value="100" required></label>
        <div id="players" >
          <label>Frodo<input id="frodo" type="number" min="0" max="100" value="3" required></label>
          <label>Sam<input id="sam" type="number" min="0" max="100" value="5" required></label>
          <label>Merry<input id="merry" type="number" min="0" max="100" value="0" required></label>
          <label>Pippin<input id="pippin" type="number" min="0" max="100" value="0" required></label>
          <label>Bilbo<input id="bilbo" type="number" min="0" max="100" value="0" required></label>
        </div>
      </fieldset>
    </form>
    <hr>
    <h1>Output</h1>
    <div id="fizzOut" >Change a value to get output (a snippet thing)
    <script>fizzing();</script>
  </body>
</html>

У меня есть ряд проблем, которые меня разочаровали, и я уверен, что тамэто лучшие способы их достижения ...:

CSS

Я очень старался изолировать форматирование /стиль от HTML, но ....

  1. Для выравнивания входных элементов управления требуется left: clear, чтобы получить каждый на своей строке
  2. Мне нужно было указать ширину меток
  3. Аналогично, h1 и hr оба необходимы left:clear

HTML:

Я волнуюсь, что мне пришлось добавить секцию сценария в конец, чтобы «инициализировать» выход. Обратите внимание, что это хорошо работает на моем сервере, но в фрагментах стека вам нужно изменить входное значение, чтобы обновить его.

Существуют ли другие проблемы с HTML, это кажется достаточно простым ....

JavaScript:

Вот где я думаю, есть много, чтобы сказать, я уверен, что есть плохие практики. Особенно меня расстраивают:

  1. Мне не удалось получить for (player in fizzPlayers) ..., чтобы работать, игрок всегда будет undefined. Я был вынужден делать что-то вроде for (var i = 0; var ...), а затем ссылаться на массив fizzPlayers.
  2. Я использую глобальные переменные, но ограничил их лишь несколькими. Я пропустил что-то там, я знаю, должен быть способ объявить поиск документов только один раз, не прибегая к глобальным.

В дополнение к тем областям, где я боролся, и где я уверен, что должны быть лучшие способы, есть ли другие предметы, которые я неправильно понял?

Есть ли у меня права?

43 голоса | спросил rolfl 22 MonEurope/Moscow2014-12-22T22:45:31+03:00Europe/Moscow12bEurope/MoscowMon, 22 Dec 2014 22:45:31 +0300 2014, 22:45:31

7 ответов


28

Загрузка

Это нетрадиционно:

var fizzLoaded;

function fizzLoad() {
  if (fizzLoaded) {
    return;
  }
  fizzLoaded = true;
  …
}

При удалении «блокировки» нет никакого вреда. Однако более элегантным способом было бы написать

window.onload = function fizzLoad() {
    …
};

Вы можете использовать обработчик onload для немедленного заполнения вывода с использованием настроек по умолчанию.

active, actfact, actname

Я не рекомендую поддерживать три параллельные массивы:

var val = parseInt(player.value);
if (val != 0) {
  active.push(player);
  actfact.push(parseInt(player.value));
  actname.push(capitaliseFirstLetter(player.id));
}

Было бы проще понять один массив объектов:

var val = parseInt(player.value);
if (val != 0) {
  active.push({ name: capitaliseFirstLetter(player.id),
                factor: val });
}

Обработка пяти игроков

Вместо того, чтобы извлекать пять элементов по идентификатору:

  fizzPlayers = [
    document.getElementById('frodo'),
    document.getElementById('sam'),
    document.getElementById('merry'),
    document.getElementById('pippin'),
    document.getElementById('bilbo')
  ];

Было бы лучше рассматривать их коллективно, чтобы вам не пришлось жестко закодировать пять идентификаторов:

fizzPlayers = document.getElementById('players').getElementsByTagName('input');

Кроме того, я не рекомендую переназначать идентификаторы для получения имени. Одна из проблем заключается в том, что будущий сопровождающий grepping код для имен будет удивлен, обнаружив, что имена имеют строчные буквы в коде, но в верхнем регистре. Другая проблема заключается в том, что идентификаторы должны быть идентификаторами - они подчиняются правилам .

Обработка событий и проверка ввода

Я не рекомендую использовать oninput, поскольку он срабатывает слишком легко. Пользователь может попытаться выполнить исправить ошибку и снова прерваться оповещением в этом процессе. Это было бы особенно неприятно, так как оповещения - модальные диалоги. Более подходящим будет обработчик onchange для каждого элемента ввода.

Layout

Поплавки - это немного боль: после того, как у вас есть поплавок на странице, вы должны убедиться, что все, что ему нужно, должно быть неудовлетворительным. Используйте их экономно.

Вам, разумеется, не нужно плавать элементы <label>.

label {
    display: inline-block;
    width: 150px;
    text-align: left;
}
input {
    display: inline-block;
    float: right;
    text-align: right;
    padding-left: 10px;
    width: 50px;
}
hr, input {
    clear: right;
}

Рассмотрим отказ от поплавков в пользу меток фиксированной ширины, как я сделал ниже. Использование <table> также было бы разумным.

 var fizzFrom, fizzTo, fizzPlayers, fizzDiv;

window.onload = function fizzLoad(event) {
  // Associate inputs with their labels (https://stackoverflow.com/a/285608)
  var labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
      var elem = document.getElementById(labels[i].htmlFor);
      if (elem) elem.dataset.labelHTML = labels[i].innerHTML;
    }
  }
  
  fizzFrom = document.getElementById('rangeFrom');
  fizzTo   = document.getElementById('rangeTo');
  fizzFrom.onchange = fizzTo.onchange = fizzChanged;
  
  fizzPlayers = document.getElementById('players').getElementsByTagName('input');
  for (var e = 0; e < fizzPlayers.length; e++) {
    fizzPlayers[e].onchange = fizzChanged;
  }
  
  fizzDiv = document.getElementById('fizzOut');
  
  fizzChanged();
};

function validate() {
  // Omitted for brevity
  return true;
}

function fizzChanged(event) {
  if (!validate()) return;

  var table = "";
  var rFrom = parseInt(fizzFrom.value);
  var rTo = parseInt(fizzTo.value);
  var active = [];

  for (var i = 0; i < fizzPlayers.length; i++) {
    var player = fizzPlayers[i];
    var val = parseInt(player.value);
    if (val != 0) {
      active.push({ name: player.dataset.labelHTML, factor: val });
    }
  }

  table += "<table>\n";
  table += "  <tr><th>Value</th><th>Message</th></tr>\n";
  for (var i = rFrom; i <= rTo; i++) {

    var msg = "";
    for (var p = 0; p < active.length; p++) {
      if (i % active[p].factor == 0) {
        msg += active[p].name;
      }
    }
    if (msg == "") {
      msg = i;
    }
    table += "  <tr><td>" + i + "</td><td>" + msg + "</td></tr>\n";
  }
  table += "</table>\n";

  fizzDiv.innerHTML = table;
}
 label {
    display: inline-block;
    width: 100px;
}
input {
    padding-left: 10px;
    width: 50px;
}
 <fieldset>
  <div><label for="rangeFrom">Range From</label>
       <input id="rangeFrom" type="number" min="1" max="100" value="1" required>
  </div>
  <div><label for="rangeTo">Range To</label>
        <input id="rangeTo"  type="number" min="1" max="1024" value="100" required>
  </div>
  <div id="players">
    <div><label for="frodo">Frodo</label>
         <input id="frodo" type="number" min="0" max="100" value="3" required>
    </div>
    <div><label for="sam">Sam</label>
         <input id="sam" type="number" min="0" max="100" value="5" required>
    </div>
    <div><label for="merry">Merry</label>
         <input id="merry" type="number" min="0" max="100" value="0" required>
    </div>
    <div><label for="pippin">Pippin</label>
         <input id="pippin" type="number" min="0" max="100" value="0" required>
    </div>
    <div><label for="bilbo">Bilbo</label>
         <input id="bilbo" type="number" min="0" max="100" value="0" required>
    </div>
  </div>
</fieldset>
<hr>
<h1>Output</h1>
<div id="fizzOut"></div>
ответил 200_success 23 TueEurope/Moscow2014-12-23T00:37:23+03:00Europe/Moscow12bEurope/MoscowTue, 23 Dec 2014 00:37:23 +0300 2014, 00:37:23
15

Ваш CSS кажется очень хорошим, хотя вам действительно нужны как hl, так и hr, если они оба делают то же самое? Почему бы вам просто не избавиться от одного из них?

У вас есть одна ошибка в вашем HTML - незакрытый div ( http://validator.w3.org/проверить ):

  <div id="fizzOut" >Change a value to get output (a snippet thing)
  <script>fizzing();</script>
</body>

Этот div должен быть закрыт:

<div id="fizzOut">Change a value to get output (a snippet thing)</div>
ответил Hosch250 22 MonEurope/Moscow2014-12-22T22:52:34+03:00Europe/Moscow12bEurope/MoscowMon, 22 Dec 2014 22:52:34 +0300 2014, 22:52:34
14

Имена

Я нахожу, что в вашем наименовании, пока он кажется последовательным, постоянное использование префикса fizz немного странно, поскольку при его запуске вы используете другие слова, кроме Fizz или Buzz.

var fizzDiv, fizzFrom, fizzTo, fizzPlayers;

Заглавная буква

Это похоже на удвоение объема работы, которую вы выполняете:

  fizzLoaded = true;
  var fizzForm = document.getElementById('fizzbuzz');
  fizzFrom = document.getElementById('rangeFrom');
  fizzTo = document.getElementById('rangeTo');
  fizzPlayers = [
    document.getElementById('frodo'),
    document.getElementById('sam'),
    document.getElementById('merry'),
    document.getElementById('pippin'),
    document.getElementById('bilbo')
  ];
  fizzDiv = document.getElementById('fizzOut');
}

И это:

function capitaliseFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
}

Возможно, объявление их с капитализацией было бы более идеальным? Я уверен, что есть причина, по которой вы это сделали, но она не кажется мне самой изящной.

Еще одна вещь

Если вы используете большее число, чем 100, и вы начинаете видеть значения с 3-4 совпадениями, было бы неплохо коснуться промежутка между ними. Пример:

  

330 FrodoSamPippin

Будет лучше читать:

  

330 Фродо Сэм Пиппин

ответил Phrancis 22 MonEurope/Moscow2014-12-22T23:00:36+03:00Europe/Moscow12bEurope/MoscowMon, 22 Dec 2014 23:00:36 +0300 2014, 23:00:36
12

Идиоматический современный метод JavaScript для записи цикла над элементами массива - forEach. Идиома for...in предназначена для ключей объектов, а не элементов массива, и он не будет работать так, как вы могли бы ожидать. При использовании for...in с массивами, это не элементы, которые заполняются в переменной цикла, а их индексы.

Например, вы можете переписать цикл в fizzing следующим образом:

fizzPlayers.forEach(function(player) {
  var val = parseInt(player.value);
  if (val != 0) {
    active.push(player);
    actfact.push(parseInt(player.value));
    actname.push(capitaliseFirstLetter(player.id));
  }
});

Переписывание в validateValues немного сложнее, потому что вам нужно вернуться из цикла. В этом случае проще использовать for..in и перебирать индексы вместо элементов:

  for (var i in fizzPlayers) {
    var player = fizzPlayers[i];
    var val = parseInt(player.value);
    if (val < 0 || val > 100) {
      alert("Illegal value " + val + " for player " + player.id);
      return false;
    }
  }

Для получения дополнительной информации см. документы , и этот связанный пост на SO


Общим подходом во избежание загрязнения глобального пространства имен является включение переменных в один глобальный объект, часто называемый App, например:

var App = window.App = {};

Затем вместо ссылки на переменные в глобальном пространстве имен, вы можете ссылаться на них в App:

App.fizzLoaded = false;

Таким образом, заменяя многие глобальные значения одним, который все еще не идеален, но лучше.


Имена переменных часто невелики:

  • fizzForm и fizzFrom отличаются только одной буквой и легко смешиваются
  • Вместо rTo, rFrom, почему не просто to и from?

 {
var fizzLoaded = false;
var fizzDiv, fizzFrom, fizzTo, fizzPlayers;

function fizzLoad() {
  if (fizzLoaded) {
    return;
  }
  fizzLoaded = true;
  var fizzForm = document.getElementById('fizzbuzz');
  fizzFrom = document.getElementById('rangeFrom');
  fizzTo = document.getElementById('rangeTo');
  fizzPlayers = [
    document.getElementById('frodo'),
    document.getElementById('sam'),
    document.getElementById('merry'),
    document.getElementById('pippin'),
    document.getElementById('bilbo')
  ];
  fizzDiv = document.getElementById('fizzOut');
}

function restrictRange() {
  var rFrom = parseInt(fizzFrom.value);
  var rTo = parseInt(fizzTo.value);
  fizzTo.min = rFrom;
  fizzFrom.max = rTo;
}

function validateValues() {
  var rFrom = parseInt(fizzFrom.value);
  var rTo = parseInt(fizzTo.value);
  if (rTo < rFrom) {
    alert("Illegal range from " + rFrom + " to " + rTo);
    return false;
  }

  for (var i in fizzPlayers) {
    var player = fizzPlayers[i];
    var val = parseInt(player.value);
    if (val < 0 || val > 100) {
      alert("Illegal value " + val + " for player " + player.id);
      return false;
    }
  }

  return true;
}

function capitaliseFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
}

function fizzing() {
  fizzLoad();
  restrictRange();
  if (!validateValues()) {
    fizzDiv.innerHTML = "Illegal inputs";
    return;
  }

  var table = "";
  var rFrom = parseInt(fizzFrom.value);
  var rTo = parseInt(fizzTo.value);
  var active = [];
  var actfact = [];
  var actname = [];

  fizzPlayers.forEach(function(player) {
    var val = parseInt(player.value);
    if (val != 0) {
      active.push(player);
      actfact.push(parseInt(player.value));
      actname.push(capitaliseFirstLetter(player.id));
    }
  });

  table += "<table>\n";
  table += "  <tr><th>Value</th><th>Message</th></tr>\n";
  for (var i = rFrom; i <= rTo; i++) {

    var msg = "";
    for (var p = 0; p < active.length; p++) {
      if (i % actfact[p] == 0) {
        msg += actname[p];
      }
    }
    if (msg == "") {
      msg = "" + i;
    }
    table += "  <tr><td>" + i + "</td><td>" + msg + "</td></tr>\n";
  }
  table += "</table>\n";

  fizzDiv.innerHTML = table;
}
}
 h1 {
    clear: left;
}

hr {
    clear: left;
}

label {
    display: inline-block;
    float: left;
    clear: left;
    width: 150px;
    text-align: left;
}
input {
  display: inline-block;
  float: right;
  text-align: right;
  padding-left:10px;
  width: 50px;
}
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>FizzBuzz</title>
    <link rel="stylesheet" href="fizzbuzz.css">
    <script src="fizzbuzz.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>Config</h1>
    <form id="fizzbuzz">
      <fieldset id="fizzControl" oninput="fizzing();">
        <label>Range From<input id="rangeFrom" type="number" min="1" max="100" value="1" required></label>
        <label>Range To<input id="rangeTo"   type="number" min="1" max="1024" value="100" required></label>
        <div id="players" >
          <label>Frodo<input id="frodo" type="number" min="0" max="100" value="3" required></label>
          <label>Sam<input id="sam" type="number" min="0" max="100" value="5" required></label>
          <label>Merry<input id="merry" type="number" min="0" max="100" value="0" required></label>
          <label>Pippin<input id="pippin" type="number" min="0" max="100" value="0" required></label>
          <label>Bilbo<input id="bilbo" type="number" min="0" max="100" value="0" required></label>
        </div>
      </fieldset>
    </form>
    <hr>
    <h1>Output</h1>
    <div id="fizzOut" >Change a value to get output (a snippet thing)</div>
    <script>fizzing();</script>
  </body>
</html>
ответил janos 22 MonEurope/Moscow2014-12-22T22:59:04+03:00Europe/Moscow12bEurope/MoscowMon, 22 Dec 2014 22:59:04 +0300 2014, 22:59:04
11

В соответствии с JSLint вам следует использовать отступы в четырех пробелах, а не в два отступа ( http://jslint.com/). Однако я не знаю официального стандарта.

var fizzLoaded = false;
var fizzDiv, fizzFrom, fizzTo, fizzPlayers;

function fizzLoad() {
    if (fizzLoaded) {
        return;
    }
    fizzLoaded = true;
    var fizzForm = document.getElementById('fizzbuzz');
    fizzFrom = document.getElementById('rangeFrom');
    fizzTo = document.getElementById('rangeTo');
    fizzPlayers = [
        document.getElementById('frodo'),
        document.getElementById('sam'),
        document.getElementById('merry'),
        document.getElementById('pippin'),
        document.getElementById('bilbo')
    ];
    fizzDiv = document.getElementById('fizzOut');
}

function restrictRange() {
    var rFrom = parseInt(fizzFrom.value);
    var rTo = parseInt(fizzTo.value);
    fizzTo.min = rFrom;
    fizzFrom.max = rTo;
}

function validateValues() {
    var rFrom = parseInt(fizzFrom.value);
    var rTo = parseInt(fizzTo.value);
    if (rTo < rFrom) {
        alert("Illegal range from " + rFrom + " to " + rTo);
        return false;
    }
    for (var i = 0; i < fizzPlayers.length; i++) {
        var val = parseInt(fizzPlayers[i].value);
        if (val < 0 || val > 100) {
            alert("Illegal value " + val + " for player " + fizzPlayers[i].id);
            return false;
        }
    }
    return true;
}

function capitaliseFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
}

function fizzing() {
    fizzLoad();
    restrictRange();
    if (!validateValues()) {
        fizzDiv.innerHTML = "Illegal inputs";
        return;
    }

    var table = "";
    var rFrom = parseInt(fizzFrom.value);
    var rTo = parseInt(fizzTo.value);
    var active = [];
    var actfact = [];
    var actname = [];
    var player;

    for (var i = 0; i < fizzPlayers.length; i++) {
        player = fizzPlayers[i];
        var val = parseInt(player.value);
        if (val != 0) {
            active.push(player);
            actfact.push(parseInt(player.value));
            actname.push(capitaliseFirstLetter(player.id));
        }
    }

    table += "<table>\n";
    table += "    <tr><th>Value</th><th>Message</th></tr>\n";
    for (var i = rFrom; i <= rTo; i++) {

        var msg = "";
        for (var p = 0; p < active.length; p++) {
            if (i % actfact[p] == 0) {
                msg += actname[p];
            }
        }
        if (msg == "") {
            msg = "" + i;
        }
        table += "    <tr><td>" + i + "</td><td>" + msg + "</td></tr>\n";
    }
    table += "</table>\n";

    fizzDiv.innerHTML = table;
}
ответил Hosch250 22 MonEurope/Moscow2014-12-22T23:01:32+03:00Europe/Moscow12bEurope/MoscowMon, 22 Dec 2014 23:01:32 +0300 2014, 23:01:32
8

Встроенный блок, float и clear?!

Большинство свойств отображения игнорируются при поплавке элемента (встроенный блок, таблица-ячейка и т. д.). Либо поплавайте, либо измените его на встроенный блок, а не на оба. Однако то, что вы действительно ищете, следующее:

label {
    display: table;
}

Теперь вы можете удалить свойства float и clear.

Избыточность

Слева - это выравнивание по умолчанию, вам не нужно указывать его на ярлыке (и я не вижу нигде, где это переопределяет предыдущую декларацию выравнивания).

Ширина в px для текстовых элементов

Вообще говоря, небезопасно указывать ширину текстовых элементов с использованием px, так как пользователь является тем, кто имеет последнее слово в используемом размере шрифта. В идеале вы должны использовать ems. Это относится как к вашей метке, так и к вашим элементам ввода.

Fieldsets

Вы используете набор полей, но никогда не используете легенду? Кажется странным выбором. Элемент fieldset предназначен для группировки аналогичных элементов управления вместе, а не только для всего. Если бы это был я, было бы два набора полей:

<fieldset id="fizzControl">
    <legend>Iterations</legend>

    <label>Range From<input id="rangeFrom" type="number" min="1" max="100" value="1" required></label>
    <label>Range To<input id="rangeTo"   type="number" min="1" max="1024" value="100" required></label>
</fieldset>

<fieldset id="players" >
    <legend>Players</legend>

    <label>Frodo<input id="frodo" type="number" min="0" max="100" value="3" required></label>
    <label>Sam<input id="sam" type="number" min="0" max="100" value="5" required></label>
    <label>Merry<input id="merry" type="number" min="0" max="100" value="0" required></label>
    <label>Pippin<input id="pippin" type="number" min="0" max="100" value="0" required></label>
    <label>Bilbo<input id="bilbo" type="number" min="0" max="100" value="0" required></label>
</fieldset>
ответил cimmanon 23 TueEurope/Moscow2014-12-23T01:27:11+03:00Europe/Moscow12bEurope/MoscowTue, 23 Dec 2014 01:27:11 +0300 2014, 01:27:11
8
for (var i = 0; i < fizzPlayers.length; i++) {
    player = fizzPlayers[i];
    var val = parseInt(player.value);
    if (val != 0) {
        active.push(player);
        actfact.push(parseInt(player.value));
        actname.push(capitaliseFirstLetter(player.id));
    }
}

Я немного изменил бы это

Во-первых, я бы использовал переменную val в вашем обращении к методу actfact.push(), не имеет смысла вызывать parseInt дважды

for (var i = 0; i < fizzPlayers.length; i++) {
  player = fizzPlayers[i];
  var val = parseInt(player.value);
  if (val != 0) {
    active.push(player);
    actfact.push(val);
    actname.push(capitaliseFirstLetter(player.id));
  }
}

Но я тогда предложил бы избавиться от этой переменной в целом следующим образом:

for (var i = 0; i < fizzPlayers.length; i++) {
  player = fizzPlayers[i];
  if (player.value == 0) continue;
  active.push(player);
  actfact.push(parseInt(player.value));
  actname.push(capitaliseFirstLetter(player.id));
}

Это продолжается до следующей итерации, создавая только одну переменную и перемещаясь в линейном направлении.

ответил Malachi 22 MonEurope/Moscow2014-12-22T22:59:52+03:00Europe/Moscow12bEurope/MoscowMon, 22 Dec 2014 22:59:52 +0300 2014, 22:59:52

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132