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

If/else statement and user dropdown selection

本文关键字：选择 用户 else 语句 If      更新时间：2023-09-26

我有一种情况，我需要用户输入一个特定的数字（例如他们每月的账单），或者，如果他们没有特定的数字，则从按州列出的平均值下拉列表中进行选择。我不确定如何编写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。

您可以执行类似的操作

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将取第一个，如果两者都已定义，则取第一个；如果第一个为"、未定义或null，则取第二个；

我希望这能帮助

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

文件：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_（）

相关文章：