JavaScript 如何在我的应用程序中获取选定的选项，以在 "if" 语句中使用以在警报框中创建输出

Question

我想知道如何使用我的应用程序中的选项作为我的 js 中的变量。总共有 20 个选项，其中包括 1 个下拉菜单（5 个选项）和 3 组单选按钮（一组 8 个，一组 4 个，一组 3 个）。每组可能性输出适合的信息。我只是想知道我如何从用户那里收集选择的选项，并输出适合选项的信息。那么如何获取点击的下拉菜单和单选按钮，变成变量，并在点击提交按钮后输出合适的信息..下面是我的代码，把我分开，告诉我我做错了什么..我什至朝着正确的方向前进吗？

我是一名新生，对此我 100% 陌生。任何帮助我入门的提示都将不胜感激。我知道这个项目将涉及大量仅使用 javascript 的编码。谢谢

例如。为什么不会输出？

function league(){
        var seasonSelection;
        var weekSelection;
        var timeSelection;
        var typeSelection;

        seasonSelection = seasonChoice();
        weekSelection = weekDay();
        timeSelection = timeChoice();
        typeSelction = chooseType();

        if(seasonSelection == "all" && weekSelection == "everyday" && timeSelection == "anytime" && typeSelection == "both"){
            window.alert("Solberg | Bassett Creek | 6:30PM | 5$ ");
        }

    }

html代码

        <form>
            <fieldset id="apphead">
                <h2>Twin Cities Disc Golf League Finder</h2>
            </fieldset>
            <fieldset id="season">
                <legend><span>Choose a Season</span></legend>
                <select id="pickseason">
                    <option value="all">ALL</option>
                    <option value="spring">Spring(Mar-May)</option>
                    <option value="summer">Summer(Jun-Aug)</option>
                    <option value="fall">Fall(Sep-Nov)</option>
                    <option value="winter">Winter(Dec-Feb)</option>
                </select>
            </fieldset>
            <fieldset id="weekday">
                <legend><span>Choose Day of the Week</span></legend>
                <label for="allweek" id="all">
                    All
                    <input type="radio" id="wkall" name="dayofweek" class="weekday" value="everyday"/>
                </label>
                <label for="monday" id="mon">
                    Mon
                    <input type="radio" id="wkmon" name="dayofweek" class="weekday" value="monday"/>
                </label>
                <label for="tuesday" id="tue">
                    Tue
                    <input type="radio" id="wktue" name="dayofweek" class="weekday" value="tuesday"/>
                </label>
                <label for="wednesday" id="wed">
                    Wed
                    <input type="radio" id="wkwed" name="dayofweek" class="weekday" value="wednesday"/>
                </label>
                <label for="thursday" id="thur">
                    Thur
                    <input type="radio" id="wkthur" name="dayofweek" class="weekday" value="thursday"/>
                </label>
                <label for="friday" id="fri">
                    Fri
                    <input type="radio" id="wkfri" name="dayofweek" class="weekday" value="friday"/>
                </label>
                <label for="saturday" id="sat">
                    Sat
                    <input type="radio" id="wksat" name="dayofweek" class="weekday" value="saturday" />
                </label>
                <label for="sunday" id="sun">
                    Sun
                    <input type="radio" id="wksun" name="dayofweek" class="weekday" value="sunday" />
                </label>
            </fieldset>
            <fieldset id="time">
                <legend><span>Choose a Time of Day</span></legend>
                <label for="any" id="anylabel">
                    Any Time
                    <input type="radio" id="any" name="timeofday" class="selecttime" value="anytime"/>
                </label>
                <label for="flex" id="flexlabel">
                    Flex (All Day)
                    <input type="radio" id="flex" name="timeofday" class="selecttime" value="flexallday"/>
                </label>
                <label for="before" id="beforelabel">
                    Before Noon
                    <input type="radio" id="before" name="timeofday" class="selecttime" value="beforenoon"/>
                </label>
                <label for="after" id="afterlabel">
                    After Noon
                    <input type="radio" id="after" name="timeofday" class="selecttime" value="afternoon"/>
                </label>
            </fieldset>
            <fieldset id="type">
                <legend><span>Choose Type</span></legend>
                <label for="both" id="bothlabel">
                    Both
                    <input type="radio" id="typeboth" name="ruletypes" class="selecttype" value="both"/>
                </label>
                <label for="singles" id="singleslabel">
                    Singles
                    <input type="radio" id="typesingles" name="ruletypes" class="selecttype" value="singles"/>
                </label>
                <label for="doubles" id="doubleslabel">
                    Doubles
                    <input type="radio" id="typedoubles" name="ruletypes" class="selecttype" value="doubles"/>
                </label>
            </fieldset>
            <fieldset class="buttonbox">
                <button onclick="league()" type="button" class="submit">FIND A LEAGUE</button>
            </fieldset>
        </form>

JavaScript

    <script>





    function league(){
        var seasonSelection;
        var weekSelection;
        var timeSelection;
        var typeSelection;

        seasonSelection = seasonChoice();
        weekSelection = weekDay();
        timeSelection = timeChoice();
        typeSelction = chooseType();

        if(seasonSelection == "all" && weekSelection == "everyday" && timeSelection == "anytime" && typeSelection == "both"){
            window.alert("Solberg | Bassett Creek | 6:30PM | 5$ ");
        }

    }


    function seasonChoice(){
        var seasonChoice = document.getElementById("pickseason").value;

        return seasonChoice;
    }

    function weekDay(){
        var weekSelection = document.getElementsByClassName("weekday");
        var weekValue;
        for(var z=0; z <= 8; z++){

            if(weekSelection.checked){
                weekValue = weekSelection.value;
            }
        }
        return weekValue;
    }

    function timeChoice(){
        var timeSelection = document.getElementsByClassName("selecttime");
        var timeValue;
        for(var t=0; t <= 4; t++){

            if(timeSelection.checked){
                timeValue = timeSelection.value;
            }
        }
        return timeValue;
    }

    function chooseType(){
        var typeSelection = document.getElementsByClassName("selecttype");
        var typeValue;
        for(var y=0; y <= 3; y++){

            if(typeSelection.checked){
                typeValue = typeSelection.value;
            }
        }
        return typeValue;
    }

    </script>

Answer 1

您在迭代单选选项时错过了 index：

    if (weekSelection[z].checked) { //missing [z]
      weekValue = weekSelection[z].value; //missing [z]
    }

其他功能同理

    if (timeSelection[t].checked) { //missing [t]
      timeValue = timeSelection[t].value; //missing [t]
    }

最后一个：

    if (typeSelection[y].checked) { //missing [y]
      typeValue = typeSelection[y].value; //missing [y]
    }

Answer 2

首先，您在function league()中有一个错字。 typeSelction = chooseType();

中缺少 e

现在，当您遍历数组时，您需要索引，就像这样 -

for (var z = 0; z < 8; z++) {

     if (weekSelection[z].checked) {
       weekValue = weekSelection[z].value;
     }
   }

您基本上缺少 z，它是数组元素的索引。同样，其他函数中的t和y。

the link 您可以在此处查看完整的已更正工作代码。另外，请记住在遍历数组时，不要超过数组长度，即不应该是 z <= 8；应该是 z < 8。希望对您有所帮助！

JavaScript 如何在我的应用程序中获取选定的选项，以在 "if" 语句中使用以在警报框中创建输出

JavaScript How to grab the selected options in my app, to use in "if" statements to create an output in an alertbox

javascript

arrays

loops

if-statement

variable-assignment