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＆amp; ç

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的元素，因此它被设置为null。因为它为null，所以它没有属性options。检查以确保实际存在一个DOM元素，其id属性等于您传递给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 if getTotal条件下的undefined（以及其他人）将始终为var。 Js只知道函数级范围，并且使用optA定义它们的函数在哪里无关紧要（你也可以在函数体的末尾定义它们）。

所以undefined的所有出现都绑定到函数的范围。这就是为什么它总是{{1}}。

确定是否使用javascript定义动态选择

2 个答案: