Question

我有一个根据选项动态计算动态报价的表单，其中一个选项是这样的两个下拉列表：

            <h2>Need a venue?</h2>
            <p>Avoid the red tape and book a marquee</p>
            <p>What package would you like to order?</p>
            <select id="marquee_package" name="marquee_package" onchange="calculateTotal()">
                <option value="Bronze">Bronze</option>
                <option value="Silver">Silver</option>
                <option value="Gold">Gold</option>
            </select>

            <p>How many people will be attending?</p>
            <select id="guests" name="guests" onchange="calculateTotal()">
                <option value="0">0</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="150">150</option>
                <option value="200">200</option>
                <option value="250">250</option>
            </select>

在javascript中我有一个计算总函数，它运行其他函数并将函数的返回值加在一起。

Marquee部分的功能在

之下

function calculateMarquee(){
var theForm = document.forms["cakeform"];

var guests = theForm.elements["guests"].value;
var marqueePackage = theForm.elements["marquee_package"].value;
var marqueePrice = 0;

if (marqueePackage = "Bronze"){
    if (guests = 0){
        marqueePrice = 0;
    }
    if (guests = 50){
        marqueePrice = 650;
    }
    if (guests = 100){
        marqueePrice = 950;
    }
    if (guests = 150){
        marqueePrice = 1400;
    }
    if (guests = 200){
        marqueePrice = 1850;
    }
    if (guests = 250){
        marqueePrice = 2400;
    }
} else if (marqueePackage = "Silver"){
    if (guests = 0){
        marqueePrice = 0;
    }
    if (guests = 50){
        marqueePrice = 1100;
    }
    if (guests = 100){
        marqueePrice = 2150;
    }
    if (guests = 150){
        marqueePrice = 2550;
    }
    if (guests = 200){
        marqueePrice = 4100;
    }
    if (guests = 250){
        marqueePrice = 5100;
    }
} else { //gold
    if (guests = 0){
        marqueePrice = 0;
    }
    if (guests = 50){
        marqueePrice = 1900;
    }
    if (guests = 100){
        marqueePrice = 2800;
    }
    if (guests = 150){
        marqueePrice = 3200;
    }
    if (guests = 200){
        marqueePrice = 4750;
    }
    if (guests = 250){
        marqueePrice = 5750;
    }
}
return marqueePrice;
}

问题是......现在这个功能只返回2400的价格，根本不会改变，我不知道为什么？

Answer 1

这里有很多问题：

您正在使用=作为比较运算符。您需要使用==或===。有关差异的更多信息，请参阅this MDN article。

将您的所有if (x = y更改为if (x === y)。
.value返回一个字符串。您将其与数字进行比较。将数字更改为字符串（if (guests === '0')或将字符串转换为数字：
```
var guests = parseInt(theForm.elements["guests"].value, 10);
```

您使用了错误的方法在<select>框中获取所选值。有关详细信息，请参阅Get selected value in dropdown list using JavaScript?

var guests = theForm.elements["guests"].options[theForm.elements["guests"].selectedIndex].value;
var marqueePackage = theForm.elements["marquee_package"].options[theForm.elements["marquee_package"].selectedIndex].value;

修复这些内容后，您的新代码will work。

我也有一些建议：

不要使用document.forms来定位表单。它在1970年代流行，而不是2014年。相反，使用document.getElementById("#the-id-of-the-form")。 See this MDN article for more info
更好的是，根本不针对表格;您的<select>框中有id，而id 在整个网页上都是唯一的（您的是，对吗？）。使用document.getElementById("#marquee_package")等直接定位选择框

Answer 2

您无法直接访问select元素的值，您需要这样做（在没有测试的情况下脱离我的头顶）类似于：

var index  = theForm.elements["guests"].selectedIndex;
var guests = theForm.elements["guests"].options[index].value;

Javascript表单就是不玩球

2 个答案: