Javascript 选择选项在值之前始终显示 '0'

Question

我在获取选择选项的值并计算它时遇到问题，问题是每次我选择一个选项时，它前面都会显示一个随机的“0”。任何帮助将不胜感激，这是相关代码:

               <div class="otherCars">  
                    <label for="otherCars">Do you drive any other cars?</label> 
                    <select name="otherCars" class="style1" id="carsSelect"  onchange="getQuote()" onblur="validateSelect('cars')" >
                        <option value="empty">-Please select-</option>
                        <option value="10" id="car1">No access to any other cars </option>
                        <option value="20">Own another car</option>
                        <option value="100">Named driver on another policy</option>
                        <option value="100">Company car (including personal use)</option>
                        <option value="100">Company car (excluding personal use)</option>
                    </select>
                </div><!-- Closing div tag-->

Javascript:

function getQuote(){
var disqualifiedDifference = 0;
var genderDifference = 0;
var carDifference = 0;
var menuSelect = document.getElementById("carsSelect");
var carValue = menuSelect.options[menuSelect.selectedIndex].value;

function genderPrice(){
    if (document.getElementById("male").checked){
        genderDifference += 200;
        }
    if (document.getElementById("female").checked){
        genderDifference += 175;
        }
        } 

function disqoPrice(){
    if (document.getElementById("yes").checked){
        disqualifiedDifference += 300;
        }
    if (document.getElementById("no").checked){
        disqualifiedDifference += 0;
        }
        } 

function carPrice(){
    if (document.getElementById("car1").selected){
        carDifference += 200;
        }
    if (document.getElementById("car2").selected){
        carDifference += 20;
        }
        }



genderPrice();
disqoPrice();

    var totalPrice = disqualifiedDifference + genderDifference + carDifference + carValue;
    document.getElementById('totalPrice').innerHTML = totalPrice;
} //end of CalculateTotal

Answer 1

menuSelect.options[menuSelect.selectedIndex].value 返回一个字符串，这意味着 + 运算符将执行字符串连接而不是加法。在尝试进行算术运算之前，将值转换为 Number。

var carValue = +menuSelect.options[menuSelect.selectedIndex].value;
//             ^ unary + operator casts a string to a number