mercredi 25 septembre 2019

Converting if statement to switch statement

I need to convert the if statement in the function to a switch statement for an assignment. What the function needs to do is have the user input be a displayed list item when they press the submit button. When the number of inputs equals 5, it says "Thanks for your suggestions."

I included the original if statement as a comment.

I'm not sure where to go from here so that it works the same as the if statement.

    <article>
        <div id="results">
            <ul>
                <li id="item1"></li>
                <li id="item2"></li>
                <li id="item3"></li>
                <li id="item4"></li>
                <li id="item5"></li>
            </ul>
            <p id="resultsExpl"></p>
        </div>
        <form>
            <fieldset>
                <label for="toolBox" id="placeLabel">
                    Type the name of a tool, then click Submit:
                </label>
                <input type="text" id="toolBox" />
            </fieldset>
            <fieldset>
                <button type="button" id="button">Submit</button>
            </fieldset>
        </form>
    </article>
    <script>
        // global variables
        var i=1;
        var listItem = "";
        // function to add input to list
        function processInput() 
        {
            /*
            if (i<=5) 
            {
                listItem = "item" + i;
                document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;
                document.getElementById("toolBox").value = "";
                if (i==5) 
                {
                    document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";
                }
                i++;
            }
            */
            switch (i) {
                case 5:
                    document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";
                    break;
                case default:
                    listItem = "item" + i;
                    document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;
                    document.getElementById("toolBox").value = "";
                    i++;
            }
        }
        // adds backward compatible event listener to Submit button
        var submitButton = document.getElementById("button");
        if (submitButton.addEventListener) {
            submitButton.addEventListener("click", processInput, false);
        } else if (submitButton.attachEvent) {
            submitButton.attachEvent("onclick", processInput);
        }
    </script>

Aucun commentaire:

Enregistrer un commentaire