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_()