javascript - 从 html 中的 select 标签获取值，我知道这会显示该值可能是重复的，但请看一下

Question

我试图从 html 中的选择器标签获取值并将其传递给另一个名为 myFunction 的函数。但错误说它是空的。

< script >
  (function() {
    var selector = document.getElementById("carSelector");
    var value = selector[selector.selectedIndex].value;
    console.log(value);
    document.getElementById('carsButton').onclick = function() {
      myFunction(value);
    };
  }()); 
</script>

<div class="selectList">
  <select name="cars" id="carSelector">
    <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
    <option value="Kia">Kia</option>
  </select>
  <button id="carsButton" type="button">Show car</button>
</div>

代码应该从选择器获取汽车类型并将其传递给函数 myFunction。

Answer 1

轻微的拼写错误(id 应该是 carsButton)，我稍微重新排列了代码 - 您期望一个命名函数 - 但没有提供一个。

您实际上并不需要指定的函数 - 您只需将选定的值记录到 onclick 处理程序中的控制台 - 但这样您就可以练习在函数之间传递值 - 我将其保留在其中。

另外 - 如果你使用 jQuery，你只需要“(function() {}) - 不需要它 - 但同样 - 我把它留在了 - 以防万一你需要它做其他事情。

(function() {
  
    document.getElementById('carsButton').onclick = function() {
      var selector = document.getElementById("carSelector");
      var value = selector.value;
      myFunction(value);
    };
    
    
    function  myFunction(value) {
      console.log(value);
     }
    
    
  }());

<div class="selectList">
  <select name="cars" id="carSelector">
    <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
    <option value="Kia">Kia</option>
  </select>
  <button id="carsButton" type="button">Show car</button>
</div>