確定動態選擇是否使用javascript定義

Question

我已經偶然發現了一個問題，並可以使用您的幫助來找出處理它的一些邏輯。基本上我有一個動態訂單表單，用戶根據用戶選擇的選項使用JavaScript實時更新價格。問題是，有3個動態下拉列表可能並不全都存在，即有時會出現a-c下拉列表，有時候只會出現a，或者只有a和b等。我得到的錯誤是對於任何未定義的選擇變量是未定義的（顯然）。我已經實施了一些js來處理，但沒有成功。這裏是我正在使用的代碼：

PHP：

 $a_sql = ("SELECT * FROM prod_add WHERE pid = '$id' AND `group` = 'a'"); 
$a_query = mysqli_query($dbconx, $a_sql); 
$a_Count = mysqli_num_rows($a_query); 
if ($a_Count > 0) { 



    while($row = mysqli_fetch_array($a_query)) { 

    $a_option = $row["option"]; 
    $a_value = $row["value"]; 

    $a_results .= "<option value='$a_value'>$a_option</option>"; 

    } 

} 

if($a_Count > 0) { 

    $a_opt = "<select class='opt_drop' id='optA' name='optA' onchange='getTotal()'>$a_results</select>"; 

} else { 

    $a_opt = ""; 

} 

沖洗和重複對於b &ç

HTML：

<h2 id="totalPrice">$<?php echo $base_cost ?></h2> <br /> 
      <input type="hidden" name="base_cost" id="base_cost" value="<?php echo $base_cost ?>" /> 
      <?php echo $a_opt; ?><br /> 
      <?php echo $b_opt; ?><br /> 
      <?php echo $c_opt; ?> 
      Quantity: 
      <select name="quantity" id="quantity" onchange="getTotal()"> 
       <option value="1"> 1 </option> 
       <option value="2"> 2 </option> 
       <option value="3"> 3 </option> 
       <option value="4"> 4</option> 
       <option value="5"> 5 </option> 
       <option value="6"> 6 </option> 
       <option value="7"> 7 </option> 
       <option value="8"> 8 </option> 
       <option value="9"> 9 </option> 
       <option value="10"> 10 </option> 
      </select> 

的Javascript：

 <script type="text/javascript"> 

    function getDDValue(elementID){ 
     var value = 0; 
     var element = document.getElementById(elementID); 
      value = element.options[element.selectedIndex].value; 
     console.log(value); 
     return parseFloat(value); 
    } 
    function getBase (elementID) { 
     var value = 0; 
     var element = document.getElementById(elementID); 
     value = element.value; 
     return parseFloat(value); 
    } 

    function getTotal(){ 
     if (typeof optA != "undefined") { 
     var optA = getDDValue("optA"); 
     } else { 
      var optA = "0"; 
     } 
     if (typeof optB != "undefined") { 
      var optB = getDDValue("optB"); 
     } else { 
      var optB = "0"; 
     } 
     if (typeof optC != "undefined") { 
       var optC = getDDValue("optC"); 
      } else { 
      var optC = "0"; 
      } 
      var quantity = getDDValue("quantity"); 
     var base_cost = getBase ("base_cost") 
      var totalPrice = '0'; 

     totalPrice = parseFloat((+base_cost + +optA + +optB + +optC) * +quantity); 
     console.log(totalPrice); 
      document.getElementById('totalPrice').innerHTML = "$" + totalPrice; 
    } 

    getTotal(); 
    </script> 

正如你在上面看到的，我試着確定這個值是否是未定義的，是否只是給它一個0的值。雖然我不知道爲什麼，但這並不奏效。

Answer 1

當使用JavaScript的typeof，它通常是一個好主意，結果與三等於比較比較因此，而不是使用!=使用!==

而且在JavaScript中，如果你傳遞一個對象，其值是undefined成條件語句將評估爲false。 If value is omitted or is 0, -0, null, false, NaN, undefined, or the empty string (""), the object has an initial value of false. 這意味着你可以把上面的如下，除非你專門找值正好undefined：

function getTotal(){ 

    // If optA does not exist, create the variable and assign it 
    if (!optA) { 
     var optA = getDDValue("optA"); 
    // Otherwise it exists, now set it to "0" pleaseandthankyou :) 
    } else { 
     optA = "0"; 
    } 

    ... 

} 

編輯：根據您的答覆上面的回答，我認爲這可能幫助：變量element爲空。這意味着沒有元素無法找到與ID爲elementID，所以它被設置爲空。因爲它是空的，所以它沒有屬性options。請檢查以確保實際上有一個id屬性等於您傳入的任何DOM元素elementID。

function getDDValue(elementID){ 
    var element = document.getElementById(elementID); 
    var value; 

    // if the element exists 
    if(element){ 
     value = element.options[element.selectedIndex].value; 
    }else{ 
     value = 0; 
    } 

    console.log(value); 
    return parseFloat(value); 
} 

Answer 2

optA（以及其他）中的getTotal的if條件總是被undefined。 Js只知道函數級別的作用域，並且使用var定義的函數中的哪個位置並不重要（您也可以在函數體的最後定義它們）。

因此所有發生的optA都被綁定到該函數的作用域。這就是爲什麼它總是undefined。