JavaScript: Little Codes

Select Theme: Final

Code:

<div class="js-resultbox" id="box1">
    <label for="scope">Step 1. Select scope: </label>
    <select id="scope">
        <option value="page">The page</option>
        <option value="box1">Box 1</option>
        <option value="box2">Box 2</option>
    </select>
</div>

<div class="js-resultbox" id="box2">
    <label for="theme">Step 2.  Select theme: </label>
    <select id="theme">
        <option value="light">Light</option>
        <option value="pink">Pink</option>
        <option value="orange">Orange</option>
        <option value="yellow">Yellow</option>
        <option value="blue">Blue</option>
        <option value="gray">Gray</option>
    </select>
</div>

<script>

    function getScope () {
        const userScope = document.querySelector("#scope").value;
        if (userScope === "page") {
            return "html";
        } else {
            return "#" + userScope;
        }
    }

    function getTheme () {
        const userTheme = document.querySelector("#theme").value;
        switch (userTheme) {
            case "light": return "white"; break;
            case "pink": return "mistyrose"; break;
            case "orange": return "peachpuff"; break;
            case "yellow": return "lightyellow"; break;
            case "blue": return "lightblue"; break;
            case "gray": return "lightgray"; break;
        }
    }

    function changeTheme () {
        document.querySelector(getScope()).style.backgroundColor = getTheme();
    }

    theme.addEventListener ("change", changeTheme);
</script>