Selecting HTML select result in null, when reading the current option

Question

I am trying to hide the elements with class furniture or book if DVD disc is selected. I want to do that dynamically, but in console, it shows, that it Cannot read property 'value' of null However, every option has a value, and that's strange. And of course, because of that, nothing is being changed

HTML select code:

<div class="iRow">
                <div class="lclass"> <label for="typeselector">Product Category</label> </div>
                <div class="tclass"> 
                    <select id="typeselector" name="productoptions">
                        <option value="DVD">DVD-Disc</option>
                        <option value="Book">Book</option>
                        <option value="Furniture">Furniture</option>
                    </select>
                </div>
            </div>

JS code:

<script> 
var opt = document.getElementById("typeselector");
console.log(opt.value);
if(opt === "DVD-Disc")
{
    console.log(document.getElementsByClassName("furniture"));
    document.getElementsByClassName("furniture").style.display = "none";
    document.getElementsByClassName("book").style.display = "none";

}
 </script>

You are using getElementsByClassName but there are no elements with those classes. — Jason Kennaly, Jun 12 '20 at 20:40
`opt` is the HTMLElement, not a string. `getElementsByClassName` returns an `HTMLCollection`, which does not have a `style` property. This should be throwing an error. — Heretic Monkey, Jun 12 '20 at 20:40
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Jun 12 '20 at 20:43

Majed Badawi · Accepted Answer · 2020-06-12T21:10:49.143

There are several issues:

getElementsByClassName returns a list, therefore, you loop over each element and hide it
There are no elements with such classes in the question
You should compare the value of the select

var opt = document.getElementById("typeselector");
if(opt.value === "DVD")
{
    let furnitures = document.getElementsByClassName("furniture");
    for(let i = 0; i < furnitures.length; i++)
         furnitures[i].style.display = "none";
    let books = document.getElementsByClassName("book");
    for(let i = 0; i < books.length; i++)
         books[i].style.display = "none";
}

<div class="iRow">
     <div class="lclass"> 
          <label for="typeselector">Product Category</label> 
     </div>
     <div class="tclass"> 
          <select id="typeselector" name="productoptions">
               <option value="DVD">DVD-Disc</option>
               <option value="Book">Book</option>
               <option value="Furniture">Furniture</option>
          </select>
     </div>
</div>

<div class="book">Book 1</div>
<div class="book">Book 2</div>

<div class="furniture">furniture 1</div>
<div class="furniture">furniture 1</div>

The right way would be to set a listener on the select:

var opt = document.getElementById("typeselector");
opt.addEventListener("change", function(){
     console.log(this.value)
     if(this.value === "DVD"){
          let furnitures = document.getElementsByClassName("furniture");
          for(let i = 0; i < furnitures.length; i++)
               furnitures[i].style.display = "none";
          let books = document.getElementsByClassName("book");
          for(let i = 0; i < books.length; i++)
               books[i].style.display = "none";
     }
});

<div class="iRow">
     <div class="lclass"> 
          <label for="typeselector">Product Category</label> 
     </div>
     <div class="tclass"> 
          <select id="typeselector" name="productoptions">
               <option value="DVD">DVD-Disc</option>
               <option class="book" value="Book">Book</option>
               <option class="furniture" value="Furniture">Furniture</option>
          </select>
     </div>
</div>

There are missing HTML elements he didint put in question snippet. I dont think he wants to remove select options. — ikiK, Jun 12 '20 at 21:05

score 0 · Answer 2 · answered Jun 12 '20 at 20:55

The problem is here:

if(opt === "DVD-Disc")

You need to ask:

if(opt.Value === "DVD")

Also, when the page first loads, the DVD option is first, so it doesn't fire the on change event. If you select Book, then select DVD, the javascript below will fire in the working example:

    <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function OnSelectionChange(select) {

            var opt = document.getElementById("typeselector");
            console.log(opt.value);
            if (opt.value === "DVD") {
                console.log("DVD Selected");
                console.log(document.getElementsByClassName("furniture"));
                document.getElementsByClassName("furniture").style.display = "none";
                document.getElementsByClassName("book").style.display = "none";

            }
        }

    </script>
</head>
<body>
    <div class="iRow">
        <div class="lclass"> <label for="typeselector">Product Category</label> </div>
        <div class="tclass">
            <select id="typeselector" name="productoptions" onchange="OnSelectionChange (this)">
                <option value="DVD">DVD-Disc</option>
                <option value="Book">Book</option>
                <option value="Furniture">Furniture</option>
            </select>
        </div>
    </div>

</body>
</html>

Selecting HTML select result in null, when reading the current option

2 Answers2