JavaScript: Little Codes

Select Theme: 1 liner

Code:

<div class="js-resultbox" id="box1">
    <label for="scope">Select scope: </label>
    <select id="scope">
        <option value="html">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">Select theme: </label>
    <select id="theme">
        <option value="white">Light</option>
        <option value="mistyrose">Pink</option>
        <option value="peachpuff">Orange</option>
        <option value="lightyellow">Yellow</option>
        <option value="lightblue">Blue</option>
        <option value="lightgray">Gray</option>
    </select>
</div>

The script (2 liners)

<script>
    changeTheme = () => document.querySelector(document.querySelector("#scope").value).style.backgroundColor = document.querySelector("#theme").value;

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

The script (1 liner)

<script>
    theme.addEventListener ("change", () => document.querySelector(document.querySelector("#scope").value).style.backgroundColor = document.querySelector("#theme").value);
</script>
Home