JavaScript: only first object selected from drop-down box logs to console-CodePudding

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 >

        <!-- header -->
        <div >
            <div >
                <h1>Example</h1>
            </div>
        </div>

        <!-- drop-down -->
        <div >
            <div >
                <div >
                    <div >
                        <select id="categories" >
                            <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"?

Thanks!

CodePudding user response：

Wrap it in a listener. IE:

select.addEventListener('change', e => {
  let value = select.options[select.selectedIndex].value;
  console.log(value)
})

let select = document.getElementById("categories");
select.addEventListener('change', e => {
  let value = select.options[select.selectedIndex].value;
  console.log(value)
})

<div >

  <!-- header -->
  <div >
    <div >
      <h1>Example</h1>
    </div>
  </div>

  <!-- drop-down -->
  <div >
    <div >
      <div >
        <div >
          <select id="categories" >
            <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>

CodePudding user response：

Your code works but only when the page loads. Adding your existing code inside an event listener is what your looking for!

const dropdown = document.getElementById('categories');

dropdown.addEventListener('change', (e) => {
  let select = document.getElementById("categories");
  let value = select.options[select.selectedIndex].value;
  console.log(value)
});

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

    </head>
    <body>


    <div >

        <!-- header -->
        <div >
            <div >
                <h1>Example</h1>
            </div>
        </div>

        <!-- drop-down -->
        <div >
            <div >
                <div >
                    <div >
                        <select id="categories" >
                            <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>