If/else语句和用户下拉选择

Question

我有一种情况，我需要用户输入一个特定的号码（例如他们的月度帐单），或者在他们没有特定号码的情况下，从一个按州平均下拉。我不确定如何编写if/else语句，首先询问是否定义了特定的输入，并代替文本输入来检查下拉值。

编辑：这是我得到的东西可行的，没有运气的第二次尝试：/

JS

var val = document.getElementById('perKWhCost').value; 
    var select_value = document.querySelector('#selection').value; 
    var getMonthlyCost = function(){ 

     if (val){ 
      getMonthlyCost = val; 
     } 
     else{ 
      getMonthlyCost = select_value; 
     } 
     console.log(getMonthlyCost); 
    } 

    var getAnnualSavings = getMonthlyCost * finalAnnualEnergy; 

HTML

<div class="form-group"> 
      <label name="monthlyCost" for="inputKWh">Per kWh cost(see energy bill)</label> 
      <p>This should look like "<em>$0.11/kWh</em>"</p> 
      <input type="text" value="" class="form-control" id="perKWhCost" placeholder="0.11"> 
      <label for="state">Or select a state</label> 
      <select name="Cost" id="selection"> 
       <option value=".11">Alabama</option> 
       <option value=".19">Alaska</option> 
       <option value=".11">Arizona</option> 
       <option value="AR">Arkansas</option> 
       <option value="CA">California</option> 
       <option value="CO">Colorado</option> 
       <option value=".20">Connecticut</option> 
       <option value=".13">Delaware</option> 
       <option value=".13">District Of Columbia</option> 
       <option value=".12">Florida</option> 
       <option value=".11">Georgia</option> 
       <option value="HI">Hawaii</option> 
       <option value="ID">Idaho</option> 
       <option value=".11">Illinois</option> 
       <option value=".11">Indiana</option> 
       <option value=".11">Iowa</option> 
       <option value=".12">Kansas</option> 
       <option value="KY">Kentucky</option> 
       <option value="LA">Louisiana</option> 
       <option value=".18">Maine</option> 
       <option value="MD">Maryland</option> 
       <option value=".19">Massachusetts</option> 
       <option value=".15">Michigan</option> 
       <option value=".12">Minnesota</option> 
       <option value="MS">Mississippi</option> 
       <option value=".09">Missouri</option> 
       <option value="MT">Montana</option> 
       <option value=".09">Nebraska</option> 
       <option value="NV">Nevada</option> 
       <option value="NH">New Hampshire</option> 
       <option value=".16">New Jersey</option> 
       <option value="NM">New Mexico</option> 
       <option value="NY">New York</option> 
       <option value="NC">North Carolina</option> 
       <option value=".09">North Dakota</option> 
       <option value=".12">Ohio</option> 
       <option value="OK">Oklahoma</option> 
       <option value="OR">Oregon</option> 
       <option value=".14">Pennsylvania</option> 
       <option value=".18">Rhode Island</option> 
       <option value="SC">South Carolina</option> 
       <option value=".10">South Dakota</option> 
       <option value="TN">Tennessee</option> 
       <option value="TX">Texas</option> 
       <option value="UT">Utah</option> 
       <option value=".17">Vermont</option> 
       <option value="VA">Virginia</option> 
       <option value="WA">Washington</option> 
       <option value="WV">West Virginia</option> 
       <option value="WI">Wisconsin</option> 
       <option value="WY">Wyoming</option> 
      </select> 
      </div> 


      <input type="button" value="Calculate!" id="submit" class="btn btn-default btn-lg" onclick="doMath();"> 
     </form> 

注：上面的JS是doMath函数的一部分，在这里没有完全展示。此外，忽略不是每个选项都有一个十进制值，这将在工作代码中进行更改。

这是我所需要的要点。我需要检查文本字段中是否有值，如果有我想getMonthlyCost存储该值（最好只有它的数字）。如果在文本框中没有输入，我希望代码检查选择器下拉列表，并选择用户并将该值传递给getMonthlyCost。

Answer 1

你可以做这样的事情

var getMonthlyCost = function(){ 
    var val = document.getElementById('perKWhCost').value; 
    var select_value = document.getElementById('selection'); 
    var parsedValue=parseFloat(val);//parse if user entered valid float or nothing 
    if (parsedValue!=NaN & val!=""){// check parsed value 
     return val; 
    } 
    else{ 
     if(select_value.selectedIndex != null) { //check if user has selected DropDown and get selected value if yes 
     return select_value.options[select_value.selectedIndex].value;} 
     else {//nothing entered} 
    } 
} 

function doMath() { 
    var getAnnualSavings = getMonthlyCost * 12; 
    console.log(getAnnualSavings); 
} 

Answer 2

它看起来像您指定了“getMonthlyCost”的功能，并假设它不是一个在试图获得“getMonthlyCost”时调用。下面的代码应该工作

var getMonthlyCost = function(){ 
    var val = document.getElementById('perKWhCost').value; 
    var select_value = document.querySelector('#selection').value; 
    var returnValue = !!val ? val : select_value; 
    console.log(returnValue); 
    return returnValue; 
} 

var getAnnualSavings = getMonthlyCost() * finalAnnualEnergy; 

或者你可以做

var monthlyCost = document.getElementById("perKWCost").value || document.querySelector("#selection").value; 
var annualSavings = monthlyCost * finalAnnualEnergy; 

monthlyCost将采取占据第一位，如果两者都规定，如果第一个是“”，未定义或为空，它会拿第二个;

我希望这有助于

例子：https://jsfiddle.net/12znp29s/

文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_()