Question

我在下面的代码中根据选择来计算自定义价格。它适用于拉伸画布，但我想知道如果用户选择它，如何使其适用于其他选项。（例如帆布板）。如果选项等于“Canvas Boards”计算自定义价格。非常感谢，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

完成编辑：

Example on 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();
}

此功能可让您检查选择的选项，文本框中的值。如果某个文本框为空，或者未选择选项，则它不会调用任何函数，否则，它将调用正确的函数，具体取决于选择的选项。从tetboxes获取的变量是这两个函数的范围，因此它们的值在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，并且它们是数字，则实际上它将运行而不会返回错误。然而会产生意想不到的结果 - 它会像用户输入n除以a的实际值一样继续。
用户可以使用您的表单执行任意脚本。尝试将alert("hello world")输入到您的某个表单字段中。当然，用户也可以只使用地址栏或浏览器的JavaScript控制台来执行任意脚本，因此这不是真的安全漏洞，但你仍然不希望这样。< / LI>

您访问表单的方式比您需要的更详细。而不是：

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声明绝对没有。你可以删除整个代码块。

Javascript自定义价格计算器

2 个答案: