Question

我有一个javascript来计算两个字段（零售和网络）的百分比，然后将该百分比转储到另一个字段（标记）。

由于我对JS世界相对较新，我最终重用了几行字段的代码。这违反了DRY和KISS原则，所以我想知道你是否可以给我一些关于如何优化我的代码的输入，以便它可以处理任何两个字段然后将值转储到第三个字段。

以下是我正在使用它的表单细分的截图。

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

enter image description here

这是我正在使用的代码，我必须重复使用它四次并将代码放在四个函数中，例如（percentage1，percentage2，percentage3，percentage4）这些函数中的每一个都处理屏幕截图中显示的一行字段。

    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，Infinity

由于

Answer 1

而不是优化，让我们首先关注正确性=）

请注意，HTMLInputElement.value属性的类型为“string”，因此您的算术运算符正在进行隐式类型转换，这意味着您可能经常进行字符串连接而不是您期望的数字运算。

我强烈建议先将它们显式转换为numbers并检查无效输入，另外，不要忘记先使用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语言进行一些正式的学习;它充满了陷阱，但如果你坚持the "good parts"，你可以省去很多麻烦和头痛。

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);
}

显然，您可以更进一步，创建一个接收ID的函数，从元素中提取值等，但您应该根据这些提示尝试自己构建。

Maerics也提出了一个非常好的观点，你应该注意到;了解有关JavaScript的优点的更多信息。 Douglas Crockford的书非常出色，所有JS开发人员都应该阅读和理解，恕我直言。

希望这可以帮助您清理代码！

优化我的Javascript百分比计算器

2 个答案: