Оптимизировать мой калькулятор процента JavaScript

Question

У меня есть javascript, который рассчитывает процент от двух полей (розничная и сетевая), а затем сбрасывает этот процент в другое поле (разметка).

Поскольку я относительно новичок в мире JS, в итоге я использовал код для нескольких строк полей. Это идет вразрез с принципами DRY и KISS, поэтому мне было интересно, не могли бы вы дать мне некоторую информацию о том, как оптимизировать мой код, чтобы он мог обрабатывать любые два поля, а затем вывести значение в третье поле.

Вот скриншот моего сегмента формы, который его использует.

http://i.imgur.com/FHvDs.png

Вот мой код, который я использую, мне пришлось использовать его четыре раза и поместить код в четыре функции, например. (процент1, процент2, процент3, процент4) каждая из этих функций работает со строкой полей, показанных на скриншоте.

    function percentage1()
                {


                //the dividee
                x = document.getElementById('tariff_data');
                //the divider
                y = document.getElementById('network_data');

                    //if the first value is lower than the second, append a "-" sign
                    if (x.value < y.value)
                    {
                        z = "-"+(x.value/y.value)*100;
                        document.getElementById('markup_data').value = z;
                    }
                    //not a negative percentage
                    else
                    {
                        z = (x.value/y.value)*100;
                        document.getElementById('markup_data').value = z;


                    }

                }   
function percentage2()
                {


                //the dividee
                x = document.getElementById('tariff_rental');
                //the divider
                y = document.getElementById('network_rental');

                    //if the first value is lower than the second, append a "-" sign
                    if (x.value < y.value)
                    {
                        z = "-"+(x.value/y.value)*100;
                        document.getElementById('markup_rental').value = z;
                    }
                    //not a negative percentage
                    else
                    {
                        z = (x.value/y.value)*100;
                        document.getElementById('markup_data').value = z;


                    }

                }
etc etc.... 

Эти функции вызываются с помощью атрибута onchange HTML

Кроме того, когда я делю на десятичное число, это дает неправильное значение, какие-либо идеи, как заставить его вычислить правильный процент десятичного числа?

Мой код также выдает эти странные выводы:

NaN, Бесконечность

Спасибо

Answer 1

Вместо оптимизации давайте сначала сосредоточимся на корректности =)

Обратите внимание, что свойство HTMLInputElement.value имеет тип "string", поэтому ваши арифметические операторы выполняют неявное преобразование типа, что означаетвы, скорее всего, часто выполняете конкатенацию строк вместо ожидаемых числовых операций.

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

var x = Number(document.getElementById('tariff_data'));
var y = Number(document.getElementById('network_data'));
if (!isFinite(x) || !isFinite(y)) {
  // Handle non-numerical input...
}

Вы также можете использовать функцию parseFloat, если хотите, например:

var x = parseFloat(document.getElementById('tariff_data'), 10);

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

Answer 2

Что касается СУШКИ вашего кода;помните, что вы можете:

• Передавать параметры своим функциям и использовать эти аргументы в функции
• Возвращать значения, используя ключевое слово return

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

// We're assuming 'dividee' and 'divider' are numbers.
function calculatePercentage(dividee, divider) {
    var result;

    // Regardless of the positive/negative result of the calculation,
    // get the positive result using Math.abs().
    result = Math.abs((dividee.value / divider.value) * 100);

    // If the result was going to be negative...
    if (dividee.value < divider.value) {
        // Convert our result to negative.
        result = result * -1;
    }

    // Return our result.
    return result;
}

Затем в ваших процентных функциях вы можете просто вызвать этот код так:

function percentage1() {
    var tariff, network, markup;

    tariff = parseFloat(document.getElementById('tariff_data').value, 10);
    network = parseFloat(document.getElementById('network_data').value, 10);
    markup = document.getElementById('markup_data');

    markup.value = calculatePercentage(tariff, network);
}

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

Maerics также делает очень хорошее замечание, которое вы должны принять к сведению;узнать больше о хороших частях JavaScript.Книга Дугласа Крокфорда превосходна и должна быть прочитана и понята всеми разработчиками JS, ИМХО.

Надеюсь, это поможет вам очистить ваш код!