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

我有一种情况，我需要用户输入一个特定的数字（例如，他们每月的账单），或者，如果他们没有特定的数字，从各州的平均值下拉列表中进行选择。我不确定如何编写if/else语句，首先询问是否定义了特定输入，并代替文本输入检查下拉值

Edit：这是我第二次尝试做一些可行的事情，没有运气：/

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>

每千瓦时成本（见能源账单）
这应该像“0.11美元/千瓦时”

或者选择一个状态
阿拉巴马州
阿拉斯加州
亚利桑那州
阿肯色州
加利福尼亚
科罗拉多州
康涅狄格州
特拉华州
哥伦比亚特区
佛罗里达州
佐治亚州
夏威夷
爱达荷州
伊利诺伊州
印第安纳州
爱荷华州
堪萨斯州
肯塔基州
路易斯安那州
缅因州
马里兰
马萨诸塞州
密歇根
明尼苏达州
密西西比
密苏里州
蒙大拿
内布拉斯加州
内华达州
新罕布什尔州
新泽西州
新墨西哥州
纽约
北卡罗来纳州
北达科他州
俄亥俄州
奥克拉荷马
俄勒冈
宾夕法尼亚
罗德岛
南卡罗来纳州
南达科他州
田纳西州
得克萨斯州
犹他州
佛蒙特州
弗吉尼亚州
华盛顿
西弗吉尼亚州
威斯康星州
怀俄明州

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

---

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

你可以这样做

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);
 }

---

看起来您将“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将取第一个，如果第一个为“”、未定义或空，则取第二个

我希望这有帮助

例如：

---

文档：

您的代码在html和js中存在问题。看到红色标记了吗。另外，在我看来，您首先要检查文本输入，如果为空，则检查下拉列表，但您的脚本逻辑首先（尝试）检查下拉列表（js第2行）。在html中，您还调用了一个不存在的函数。我认为你可以做得更好。请展示你的html，如果你做一个plnkr会更好，另一件事是“getMonthlyCost”是一个函数，你像一个变量一样使用它。你能证实吗？第一个很有效！谢谢感谢所有做出贡献的人，你们都太棒了！我可以问一下它为什么有效吗？变量似乎存储了用户的潜在输入，然后函数计算是否有文本输入，如果没有，则返回select_值。但是到底是什么呢！！变量？val：选择_值；做“！！”特别是“？”。它是一个内联if语句！！val检查val是否为空，未定义“。。。。它的工作原理与if（val）相同，但我用它来表示val不是bool。