jangot / f-calculator Goto Github PK

Сейчас переменная in_i определена так, что она используется в двух функциях resett (название этой функции стоит поправить) и в функции get_value.
Почему?
Глобальную переменную (такую переменную, которую видно из любой точки приложения) имеет смысл определять, когда необходимо сохранить какое-то состояние для всего приложения. Например, что кнопка была нажата и нужно проверять это в разных точках приложения (хотя это тоже плохая практика и так лучше не делать). В данном случае нет необходимости связывать эти две функции одной переменной, к тому же это может привести к ошибкам, так как значение переменной становиться не предсказуемым.
Можно оставить название переменной, изменив лишь место, в котором она создается (место создания переменной определяется ключевым словом var). В том месте, где она определена необходимо удалить, а написать var in_i в начале каждой функции где она используется.

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

Сейчас, что бы выбрать элемент нужно прописать его руками. Но, как я понимаю, есть ограниченный набор элементов и нет необходимости заставлять пользователя руками вписывать элементы. Для таких ситуаций лучше использовать тег select. Внутри этого тега надо добавить необходимое количество тегов option в которые просто написать значения элементов например <option>1t</option>. Получать значение нужно будет так же, то только надо проверить селектор получения этого элемента.

Убрать везде использования ID
Для начала можно все атрибуты id поменять на class и начать использовать querySelector.
Это нужно, в первую очередь, для того, что бы разобраться как работает эта функция. В последствии это будет нужно для получения динамических элементов ID которых не известно.

В дополнение стоит познакомиться с функцией querySelectorAll и осознать чем она отличается от querySelector.

Разница очень простая, если на странице много элементов которые подходят под этот селектор querySelector вернет первый. Когда же элементов много и более того мы не знаем сколько точно то надо использовать querySelectorAll и брать их по индексу. (Пока можно не думать как обойти не известное количество элементов).

Вместо с бутстрап на страницу подключена библиотека jQuery. У этой библиотеке много возможностей. Одна из них - более короткая запись функций получения элементов.
Вместо document.querySelectorAll можно использовать функцию $.
То есть можно написать так: $("td input[type='text']")

Стоит разделить функцию get_value на две части (функции).
Первая будет проверить корректность ввода, а вторая считать. Это нужно так как уже сейчас довольно сложно понять, что происходит.
Можно сделать так:
Первая функция пробегается по всем полям и проверяет корректность ввода. Если есть ошибки, то она помечает эти поля красным и возвращает результат false если все в порядке то она убирает ошибки и возвращает true.
А функция подсчета просто считает и выводит результат, если первая вернула true

Я это вижу так:

function testFields(){....}
function calculateValue() {....}
function get_value() {
    if (testFields()) {
        calculateValue();
    }
}

Сейчас в коде, что бы реагировать на событие элемента (на данном этапе используется только событие click) используется аттрибут. У такого способа есть недостатки.
В первую очередь это не удобно. Подписка на событие происходит в html файле, отдельно от JS кода. Во вторых, при использовании события можно использовать только одну функцию (на самом деле это не так, но сейчас не стоит в этом разбираться, я немного упрощаю).
Есть способ подписаться на событие элемента используя только JS.
Для этого есть функция addEventListener. Для того, что бы ее использовать необходимо каким либо образом получить элемент. Это может быть либо getElementById или querySelector не важно.
Выглядит это так document.querySelector(".my-element").addEventListener("click", myFunctionName).
Стоит обратить внимание на то, что в отличии от аттрибута, где необходимо написать имя функции и скобки после них, при использования функции addEventListener скобки писать не надо.

В дополнение:
Если на странице используется библиотека jQuery то можно сделать тоже самое с ее помощью: $(".my-element").click(myFunctionName). Такая запись более короткая и способствует улучшению читаемости кода.
Есть еще некоторые отличия, но это сейчас не важно.

В функции get_value используется цикл (проверка полей ввода). От него можно и нужно избавиться.
Этот цикл используется для того, что бы обойти все элементы input и забрать их значение. Для того, что бы это сделать лучше использовать функцию querySelectorAll.

План действий:

1. Сформировать CSS селектор, для функции querySelectorAll так, что бы эта функция вернула все необходимые элементы (те которые сейчас обрабатываются в цикле).
2. Перед циклом создать переменную, к примеру elementsList и присвоить ей результат выполнения функции querySelectorAll.
3. Вместо "магического числа" 7 написать elementsList.length - в length хранится количество элементов в списке elementsList
4. Поменять начальное значение переменной i в цикле на 0.
5. Поменять присвоение значения переменной in_i из elementsList[i].

Сейчас колонки определяются с помощью CSS. Разумеется, что это код который занимает место, а чем больше кода, тем сложнее в нем разобраться.
В bootstrap есть возможность создавать колонки.
Вместо описания стилей необходимо использовать специальную разметку из bootstrap.
Здесь описано как это сделать http://bootstrap-4.ru/docs/4.2.1/layout/grid/
Если в двух словах, то надо весь код страницы обернуть в <div class="container-fluid"></div> а затем добавить блок с классом row и добавить два блока колонок с классами col. Для управления размером колонок необходимо менять классы этих колонок на col-1, col-2 и т.д.

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