Question

（从前面的修改问题）所以这是作业：

首先，您必须计算包裹重量的成本。用户将在文本字段中输入其宗地的总重量。时间表如下......

0 - 150磅每磅20.00美元 | 151 - 300磅每磅15.00美元 | 301 - 400磅每磅10.00美元不允许用户输入＆lt; 0或＆gt; 400.如果他们这样做，则输出一个红色的错误信息给div＃results和'return'退出该函数。

接下来，用户将选择折扣金额（无论出于何种原因，无所谓）。您需要申请任何折扣金额。（50％的折扣，20％的折扣，没有）。

这是我到目前为止所做的。变量尚未声明，只需将它们写入。

function calcTotal() {

var msg;
var weight = parseInt( document.getElementById("weight").value );
var discount;
var total;

if( weight >= 0 && weight <= 150 ) {

    total = weight * 20 
}   
else if( weight >150 && weight <= 300 ) {

    total = weight * 15 
}   
else if( weight >300 && weight <= 400 ) {

    total = weight * 10 
}

if( document.getElementById("50%").selected == true ) {

total = total * 0.50;
}

if( document.getElementById("25%").selected == true ) {

total = total * 0.25;
}

if( document.getElementById("none").selected == true ) {

total = total;
}

到目前为止，这有点正确吗？

似乎无法根据用户选择的内容弄清楚如何应用折扣。折扣是3个单选按钮。我是否需要为每个单选按钮应用一个ID？

Answer 1

首先，您需要使用＆amp;＆amp; （AND）而不是|| （或）因为您希望不仅仅满足一个条件。第一个IF语句将值-1000作为TRUE（以及任何其他值，因为您的间隔从0到无穷大加上从负无穷大到150），因为它满足第一个条件的第二部分。

其次，公式是正确的，但您必须将百分比转换为0-1区间。 100％= 1,0％= 0且x％= x / 100。然后它应该没有任何问题。

最后要做的是你需要将值传递给你的函数：

function calcTotal(weight, discount) {
    // do the calculation with passed values, you do not need to declare them here anymore
}

或者您需要在该函数内部设置值，例如：

function calcTotal() {
    var discount = $("#inputField").val();  // using jQuery, where inputField is element
                                            // from which the value is taken e.g. < input >
    ...
}

要显示最终输出，请将其添加到您的函数中：

$("body").append("<div id='output'>" + output + "</div>"); // using jQuery, watch for single/double quotes

并使用css将其设置为中心：

#output {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-left: -100px;
    top: 200px;
}

Answer 2

我做了一个小提琴，你应该能够很快得到正在发生的事情。

http://jsfiddle.net/a58rR/3/

我使用了一点jQuery来获取UI元素的绑定。

我希望这不是一个课程，你复制这个批发！ ;）

基本上，我把所有的Tier定价都放在一个对象中。

Tiers = [{
    nPrice: 20,
    nWeightMin: 1,
    nWeightMax: 150
}, {
    nPrice: 15,
    nWeightMin: 151,
    nWeightMax: 300
}, {
    nPrice: 10,
    nWeightMin: 301,
    nWeightMax: 400
}];

然后，您的功能将根据输入的重量和折扣进行计算，确定等级，验证权重，如果超出范围则更新UI消息，计算最终价格并应用任何折扣，并更新UI总价：

function calculatePrice() {
    console.log('Begin Calc');
    var _nW = document.getElementById('nParcelWeight').value * 1;
    var _nD = document.getElementById('aDiscounts').value * 1;
    var _nP = 0;
    var nTotalPrice = 0;
    var _TotalPrice = document.getElementById('nPrice');
    var _nMaxWt = Tiers[Tiers.length - 1].nWeightMax; 
    // Using the last Tier keeps the max weight dynamic no matter how many tiers you add as long as they are in order

    console.log('Max Weight: ' + _nMaxWt);
    console.log('Weight: ' + _nW);
    console.log('Discount: ' + _nD);

    if (isNaN(_nW) || _nW < 1 || _nW > _nMaxWt) {

        // Throw/Display an out of range error here  
        console.log('Yep, out of range');
        document.getElementById('uiFeedback').innerHTML = 'The number is out of range.';
    } else {
        // reset if valid
        document.getElementById('uiFeedback').innerHTML = '';
    }

    // Find Tier
    for (var i = 0; i < Tiers.length; i++) {
        console.log('we are in loop:' + i);
        if (_nW >= Tiers[i].nWeightMin && _nW <= Tiers[i].nWeightMax) {
            _nP = Tiers[i].nPrice;
            break;
        }
    }
    console.log('Tier: ' + i);
    console.log('Price: ' + _nP);

    // Calculate Discount
    if (_nD != 1) _nD = 1 - _nD; // (20%==.20, but that would be .80 of the Price, etc)

    // Calc Price
    nTotalPrice = (_nP * _nW * _nD);
    _TotalPrice.value = nTotalPrice;
}

html看起来像这样：

<div id='uiFeedback'></div>Parcel Weight:
<input id='nParcelWeight' value='0'>Discount:
<select id='aDiscounts'>
    <option value='1'>none</option>
    <option value='.2'>20%</option>
    <option value='.5'>50%</option>
</select>
<hr>Price:
<input id='nPrice'>

您的CSS至少可能只是为您的消息添加颜色：

#uiFeedback {
    color: red;
    font-weight: bold;
}

以下是绑定，您可以使用内联onChanges或原始js附加事件：

$(function () {
    $('#nParcelWeight,#aDiscounts ').on('change', function () {
        calculatePrice();
    });
})

Javascript和变量帮助

2 个答案: