JS找不到HTML选择

Question

我正在尝试使用javascript选择HTML。但这似乎找不到。我已经在线尝试了该问题的一些答案，例如：

等待窗口完全加载：

window.onload = function(){
    var opt = document.getElementsByName("productoptions");

    console.log(opt.options);
}

并且试图将js放在select元素之后。是的，我已经多次检查了拼写。我想知道为什么会这样。每次它把我扔进控制台时-未定义。也许您知道答案；）

当前JS代码：

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";
}

HTML代码的一部分，负责HTML选择部分。

<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>

Answer 1

它返回数组。所以使用opt [0]

window.onload = function(){
    var opt = document.getElementsByName("productoptions");

    console.log(opt[0].options);
}

<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>

Answer 2

嗯，您应该提供onchange方法进行选择。

var opt = document.getElementById("typeselector");

function handleChange(val){
 alert(opt.value)
 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" onchange="handleChange(this)">
               <option value="DVD">DVD-Disc</option>
               <option value="Book">Book</option>
               <option value="Furniture">Furniture</option>
          </select>
     </div>
</div>