优化我的Javascript百分比计算器

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

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

这是我的表单段使用它的截图

这是我正在使用的代码，我必须重复使用它四次，并将代码放在四个函数中，例如（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.... 

函数百分比1（）
{
//分割人
x=document.getElementById（“关税数据”）；
//分隔器
y=document.getElementById（'network_data'）；
//如果第一个值小于第二个值，请附加“-”号
如果（x值

使用onchange HTML属性调用这些函数

另外，当我除以一个十进制数时，它给出了错误的值，有没有办法让它计算出一个十进制数的正确百分比

我的代码也给出了这些奇怪的输出：

南，无限

---

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

请注意，属性的类型为“string”，因此算术运算符正在执行隐式类型转换，这意味着您可能经常执行字符串串联，而不是预期的数字操作

我强烈建议将它们显式转换为first并检查无效输入，另外，不要忘记首先使用

var

声明变量，这样它们就不会潜在地破坏全局变量，例如：

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

如果您愿意，也可以使用该功能，例如：

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

---

我强烈建议您对JavaScript语言进行一些正式的学习；它充满了陷阱，但如果你坚持下去，你可以省去很多麻烦和头痛。

与其优化，不如先关注正确性=）

请注意，属性的类型为“string”，因此算术运算符正在执行隐式类型转换，这意味着您可能经常执行字符串串联，而不是预期的数字操作

我强烈建议将它们显式转换为first并检查无效输入，另外，不要忘记首先使用

var

声明变量，这样它们就不会潜在地破坏全局变量，例如：

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

如果您愿意，也可以使用该功能，例如：

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

---

我强烈建议您对JavaScript语言进行一些正式的学习；它充满了陷阱，但如果你坚持下去，你可以省去很多麻烦和头痛。

关于干涸你的代码；记住，你可以：

• 将参数传递给函数并在函数中使用这些参数
• 使用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;
}

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

Maerics也提出了一个你应该注意的非常好的观点；进一步了解JavaScript的优点。DouglasCrockford的书非常优秀，所有JS开发人员都应该阅读和理解，IMHO

---

希望这能帮助您清理代码

关于烘干代码；记住，你可以：

• 将参数传递给函数并在函数中使用这些参数
• 使用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;
}

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

Maerics也提出了一个你应该注意的非常好的观点；进一步了解JavaScript的优点。DouglasCrockford的书非常优秀，所有JS开发人员都应该阅读和理解，IMHO

希望这能帮助您清理代码

Tha