如何正确集成此 Javascript答案

【问题标题】：How this Javascript can be integrated properly如何正确集成此 Javascript
【发布时间】：2013-11-17 03:32:37
【问题描述】：

大家好，

拜托，我还在学习中。我正在尝试制作一个自动计算器脚本来计算价格（基于数量的折扣）并在文本字段中显示结果。

我编写了一个 javascript，但它似乎在我正在测试的这个示例 html 页面中不起作用。

<html>
        <p>price calculator ( Rate: N1.50 )</p>
        <br />
        <label for="units">Units:</label>
        <input name="units" type="text" id="units" value="1000" />
        <script type="text/javascript">

            var parray = "1000-9999:1.9; 10000-49999:1.8; 50000-99999:1.5; 100000-9999999:1.4; 10000000-0:1.4;";
            var prices = parray.split(';');

            var mins   = new Array();
            var maxs   = new Array();
            var rates  = new Array();

            for (var index in prices)
            {
                var price = prices[index];
                var m = price.split(':');
                if(m.length != 2) continue;
                var u = m[0].split('-');

                if(u.length == 2 && mins.length == maxs.length && maxs.length == rates.length)
                {
                    rates[rates.length] = parseFloat(m[1]);
                    mins[mins.length]   = parseFloat(u[0]);
                    maxs[maxs.length]   = parseFloat(u[1]);
                }
            }

            var pricemins = new Array();
            var pricemaxs = new Array();

            for(var i = 0; i < mins.length; i++)
            {
                pricemins[i] = rates[i]* mins[i];
                pricemaxs[i] = rates[i]* maxs[i];
            }


        $(document).ready(function(){

            $('#units').keyup(function(){

                    var units = parseInt($('#units').attr('value'));
                    var rate  = 0;
                    for(var i = 0; i < mins.length; i++)
                    {
                        if(units >= mins[i] && (units <= maxs[i] || maxs[i] == 0)) {
                            rate = rates[i];
                            break;
                        }
                    }

                    var amount = units * rate;
                    if(amount == NaN) amount = 0;
                    if(rate == 0)
                    {
                        $('#amount').attr('value', '--');
                        $('#price_rate').html('price calculator ( Rate: ? -- )');
                    }
                    else {
                        $('#amount').attr('value', amount.toFixed(2));
                        $('#price_rate').html('price calculator ( Rate: ?' + rate.toFixed(2) + ' )');
                    }
            });

            $('#units').keyup();

            /////////////////////////////

            $('#amount').keyup(function(){

                    var amount = parseInt($('#amount').attr('value'));
                    var rate   = 0;

                    for(var i = 0; i < pricemins.length; i++)
                    {
                        if(amount >= pricemins[i] && (amount <= pricemaxs[i] || pricemaxs[i] == 0)) {
                            rate = rates[i];
                            break;
                        }
                    }

                    var units = parseInt(amount/rate);
                    if(units == NaN) units = 0;

                    if(rate == 0)
                    {
                        $('#units').attr('value', '--');
                        $('#price_rate').html('price calculator ( Rate: ? -- )');
                    }
                    else {
                        $('#units').attr('value', units);
                        $('#price_rate').html('price calculator ( Rate: ?' + rate.toFixed(2) + ' )');
                    }
            });

            $('#amount').keyup();
          });
        </script>

        &nbsp;&nbsp;
        <label for="amount">Price: </label>
        <input name="amount" type="text" id="amount" style="width:100px" />
</html>

【问题讨论】：

你还没有描述具体的问题是什么，但跳出来的一件事是== NaN。您无法将NaN 与== 进行比较，因为NaN !== NaN。使用amount !== amount 或isNaN(amount)。

标签： javascript html forms calculator

【解决方案1】：

您可以使用jsfiddle.net 来测试您的工作。我已将标记与 JS 分开，并将您的 .keyUp() 方法替换为 .on() 事件委托。不过，您的代码似乎存在一些问题，因为它还没有完全解决。希望这可以帮助您走上正确的道路：http://jsfiddle.net/3dRhn/

$('#units').on('keyup', function () {
    //etc
});

$('#amount').on('keyup', function () {
    //etc
});

【讨论】：

您的脚本在完全加载后需要与文档进行交互。这是应该将其与标记分开的（众多）原因之一。
非常感谢您花时间回复。是的。我似乎被困在这一点上，在我使用此代码的主 html 文件中，它仅在页面加载时计算初始值，一旦完全加载，它就会停止工作。然而，在 jsfiddle 页面上，它似乎做同样的事情。
您可以尝试使用console.log()s 通过脚本跟踪值，以确保它们通过并在预期的位置可用。
谢谢，我想我已经在 jsfiddle 页面上看到了问题，当我选中“迁移 1.2.1”框并运行它时，一切正常。我将“
太好了，很乐意提供帮助。

【解决方案2】：

您需要查看 Html 中的页面结构。您需要的不仅仅是围绕文档的标签。您似乎也在使用 jQuery javascript 框架中定义的方法。

我认为您至少需要以下内容（来自：http://learn.jquery.com/about-jquery/how-jquery-works/，进行了修改，因此您不必下载 jQuery 库来测试它。）。

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <!-- put your html here -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>

    // Your code goes here.

    </script>
</body>
</html>

分解：在使用 jQuery 之前，您需要包含该库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQuery 是一个 Javascript 框架，它是一组方法和/或对象，用于简化和/或标准化跨不同浏览器实现 javascript 的 Javascript 使用。这会加载这些方法，以便您可以使用它们。

一旦你加载了 jQuery，你就可以像上面的例子一样使用 javascript。您需要更正一些其他发帖人提到的错误。

<script>

    // Your code goes here.

</script>

更多关于html5的深入信息http://www.w3.org/TR/html5-author/

更多关于 jQuery 的信息http://learn.jquery.com/

【讨论】：

您好，感谢您抽出宝贵时间回复。实际上，我已经在我的主项目 html 文件中正确地构造了它，问题是，它只计算页面加载时的“初始”值，但在页面完成加载计算器后
抱歉，这是为了 Stuart 之前给出的答案。
啊，明白了。在这种情况下，我认为@Stuart 会让你上路。
是的，非常感谢您抽出宝贵时间做出回应并提供资源。它将帮助我了解更多！非常感谢。