Javascript自定义价格计算器

Question

我有下面的代码来根据选择来计算自定义价格。 它适用于拉伸画布，但是我想知道如果用户选择它，如何使其适用于其他选项。 （例如，画布板）。 如果选项等于“画布板”，则计算自定义价格。 非常感谢，Deryn。

 function calculate_total() {
     var ttl = 0;
     var len = eval(document.forms['calc']['length'].value);
     var wid = eval(document.forms['calc']['width'].value);
     var thick = document.forms['calc']['frame'].value;
     var strOptions = e.options[e.selectedIndex].text;
     if(len.length == 0) {
         return;
     }
     if(wid.length == 0) {
         return;
     }
     if(thick == 0) {
         return;
     }
     ttl = (len + wid) * 2;
     //inches
     if((ttl >= 24) && (ttl <= 36)) {
         ttl *= .19;
     }
     if((ttl >= 37) && (ttl <= 56)) {
         ttl *= .20;
     }
     if((ttl >= 57) && (ttl <= 76)) {
         ttl *= .21;
     }
     if((ttl >= 77) && (ttl <= 92)) {
         ttl *= .22;
     }
     if((ttl >= 93) && (ttl <= 100)) {
         ttl *= .23;
     }
     switch(thick) {
     case "1.5":
         ttl;
         break;
     case "2":
         ttl;
         break;
     case "3":
         ttl;
         break;
     }
     document.getElementById('total').value = ttl.toFixed(2);
 } // end function definition

<form name="calc" id="calc">
    Length: <input type="text" name="length" id="length" onchange="calculate_total()" /> Inches <br />
    Width: <input type="text" name="width" id="width" onchange="calculate_total()" /> Inches <br />

    <select name="frame" onchange="calculate_total()">
        <option value="0" selected>Select below</option>
        <option value="1.5">Streched Canvas</option>
        <option value="2">Canvas Boards</option>
        <option value="3">Canvas Rolls</option>
        <option value="4">Primed Boards</option>
        <option value="5">Paintings/Printing Streching</option>
    </select>
    <br /><br />
    <b>Total:</b> $ <input id="total" name="total" readonly=true style="border: none" />
</form>

Answer 1

完成编辑：

jsfiddle上的示例

在上面提供的链接中，您可以看到示例，以及从列表中选取的每个选项的其他功能。 目前，它们仅显示警报窗口，但是您应该知道该放置什么，然后对其进行计数。

function check_which_selected() {
    selectedOption = document.forms['calc']['frame'].options;
    thick = +selectedOption[selectedOption.selectedIndex].value;
    ttl = 0;
    len = +document.forms['calc']['length'].value;
    wid = +document.forms['calc']['width'].value;

    if (len.length <= 0) return;
    if (wid.length <= 0) return;
    if (thick <= 0) return;

    if (thick == "0") return;
    if (thick == "1.5") calculate_total();
    if (thick == "2") calculate_total_canvas_boards();
    if (thick == "3") calculate_tota_canvas_rolls();
    if (thick == "4") calculate_total_primed_boards();
    if (thick == "5") calculate_total_paintings();
}

此功能使您可以检查，选择了什么选项，在文本框中输入了什么值。 如果某些文本框为空，或者未选择选项，则它将不会调用任何函数，否则，它将根据所选的选项来调用适当的函数。 从tetbox中获取的变量的作用域是这两个函数，因此它们的值在check_which_selected()分配，然后可以在其他函数中使用。

您还可以使用switch/case定义将调用哪个函数。

那是您要找的东西吗？

Answer 2

您正在学习JavaScript真是太好了。 继续吧！

您确定它适用于拉伸板吗？ 我看到一些可以改进的地方，而另一些则是显而易见的。

首先，您要引用变量e ，但从未定义该变量。 那会导致错误。 看起来e旨在引用frame选择器。 但是，由于e仅用于创建strOptions ，而从不使用strOptions ，因此我们可以删除整行，甚至不必担心e 。

接下来，不建议使用eval ，尤其是您打算使用的方法。 似乎您正在尝试从字符串中获取数字。 这里有几点：

• 有许多更简单，更安全的方式将字符串转换为数字。 就个人而言，我只需要使用+运算符即可。 例如， var n = +"10" 。 parseFloat()是另一个不错的选择。
• 如果用户未输入数字，则很可能会收到错误消息。 例如，如果用户输入“ n / a”，则eval()将尝试将其解释为脚本。 假设n和a不是实际的变量名，则将导致错误。 但是实际上，它可能是有效的JavaScript：如果您有变量n和a define，并且它们是数字，则实际上它将运行并且不会返回错误。 但是， 它将产生意想不到的结果-就像用户输入的n实际值除以a 。
• 用户可以使用您的表单执行任意脚本。 尝试在您的一个表单字段中输入alert("hello world") 。 当然，用户也可以只使用地址栏或浏览器的JavaScript控制台上执行任意脚本，所以这不是一个真正的安全漏洞，不过，你不希望出现这种情况。

访问表单的方式比您需要的更为冗长。 代替：

document.forms['calc']['length'].value;

您可以跳过方括号符号和对forms的引用：

document.calc.length.value;

我再进一步，只将对document.calc的引用存储在变量中：

var f = document.calc;
var len = +f.length.value;
var wid = +f.width.value;
var thick = +f.frame.value;

（请注意，如前所述，请注意我如何使用+来获取数字）

在这里猜测，看起来您正在使用ttl *= .19代码应用折扣，但是看起来您正在向后应用折扣。 例如，用户购买的画布越多，每英寸的成本就越高。 您购买的数量越多，每英寸的价格不应该便宜吗？ 你知道，像早餐麦片吗？

无论哪种方式，逻辑上都有一些缺陷。 您始终使用小于或等于且大于或等于。 永远不要仅仅小于或大于。 因此，您缺少一些值。 如果我输入长度5和宽度5，则我的价格是20美元。 但是，如果我输入长度6和宽度6，则我的价格仅为4.56美元。 如果输入8 x 10，我将得到$ 6.84，但是如果输入8x10.25，我将得到$ 36.50。 那是不对的，可以吗？ 而是这样做：

if (ttl > 92) {
    ttl *= .23;
}
else if (ttl > 76) {
    ttl *= .22;
}
else if (ttl > 56) {
    ttl *= .21;
}
else if (ttl > 36) {
    ttl *= .20;
}
else {
    ttl *= .19;
}

您的switch语句绝对不执行任何操作。 您可以删除整个代码块。