vendredi 16 décembre 2016

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

The image is what my app looks like(there are 5 season options). Im a new student, and I'm 100% green to this. Any tips to help get me started would be greatly appreciated. I know that this project is gonna involve lots of coding using only javascript. Thanks

html code

        <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>

Aucun commentaire:

Enregistrer un commentaire