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語句絕對不執行任何操作。 您可以刪除整個代碼塊。