I have a drop-down menu and I'd like to log when the value of the selection changes. Currently, only the ***first element*** is being logged to the console. Here is my code:

**HTML:**

```
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <title>Example</title>

    </head>
    <body>

    <div class="container-fluid">

        <!-- header -->
        <div class="row justify-content-center">
            <div class="align-self-center">
                <h1>Example</h1>
            </div>
        </div>

        <!-- drop-down -->
        <div class="row justify-content-center">
            <div class="align-self-center">
                <div class="user-control">
                    <div class="form-group">
                        <select id="categories" class="form-control">
                            <option value="All Categories">All Categories</option>
                            <option value="Category 1">Category 1</option>
                            <option value="Category 2">Category 2</option>
                            <option value="Category 3">Category 3</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

    <script src="my_js.js"></script>
    </body>
</html>

```

**JavaScript:**

```
let select = document.getElementById("categories");
let value = select.options[select.selectedIndex].value;
console.log(value)

```

Why am I not able to see anything other than "All Categories"?

[![enter image description here](https://i.stack.imgur.com/llV7S.jpg)](https://i.stack.imgur.com/llV7S.jpg)

Thanks!