Adding items selected from dropdown into a list using Javascript DOM

min hui 0
Viewed 20

I am trying to add selected items from the dropdown into a shopping list using <li>. But my code gives the error Uncaught ReferenceError display is not defined at HTMLSelectElement.onchange. Can someone help fixing it?

Code:

<!DOCTYPE html>
<html>
<body>
    <h1>Shopping List</h1>
    <select id="select_item" onchange="display(this)">
        <option value="NoteBook">Notebook</option>
        <option value="Jello">Jello</option>
        <option value="Spinach">Spinach</option>
        <option value="Rice">Rice</option>
        <option value="Birthday Cake">Birthday Cake</option>
        <option value="Candles">Candles</option>
    </select>

    <p>Shopping Cart:</p>
    <ul id="shopList"></ul>

    <script>
        // method 2
        var options = document.querySelectorAll("option");
        console.log(options[0]);

        for(var i=0; i< options.length; i++){
            option.addEventListener('change', function display(e){
                console.log(e.target.value);
            })
        }
    </script>
    </body>
</html>
dom javascript
1 Answers

There is no display function defined which you use on you html select element.You can get the selected value onchange following way

function display (v) {
   console.log(v)
}
<select id="select_item" onchange="display(this.value)">
        <option value="NoteBook">Notebook</option>
        <option value="Jello">Jello</option>
        <option value="Spinach">Spinach</option>
        <option value="Rice">Rice</option>
        <option value="Birthday Cake">Birthday Cake</option>
        <option value="Candles">Candles</option>
    </select>

jitender0
Related