我找不到为什么对象不能读取它自己的值

Question

我正在为我的兄弟写一段关于精灵宝可梦的代码，但是Pokeball对象没有告诉我它的价值，我也不知道为什么。代码如下：

    let pokeball = document.getElementById("pokeballType");
    let catchRate = document.getElementById('catchRate')
    console.log(`the type of pokeball is ${typeof(pokeball)}.`);
    if (pokeball.options[pokeball.selectedIndex].value === 'timerBall') {
        timerBall.style.display = 'inline';
        timerBallLabel.style.display = 'inline';
        console.log('Working')
    }

    <select name = 'pokeball2' id="pokeballType">
        <option value=1 selected = 'selected'>Pokeball</option>
        <option value=2>Ultra Ball</option>
        <option value=1.5>Great Ball</option>
        <option value=3.5>Dusk Ball if used inside cave</option>
        <option value=4>Quick ball if used on first turn</option>
        <option value='timerBall'>Timer Ball</option>
    </select>

Answer 1

您需要一个change事件，该事件在您更改de selectbox中的值时触发。否则，它将仅在启动时运行。

​

let pokeball = document.getElementById("pokeballType");

pokeball.addEventListener("change", () => {
  if (pokeball.value === 'timerBall') {
    console.log("timerBall selected...");
  }else{
    console.log(pokeball.value);
  }
});

<select name = 'pokeball2' id="pokeballType">
    <option value=1 selected = 'selected'>Pokeball</option>
    <option value=2>Ultra Ball</option>
    <option value=1.5>Great Ball</option>
    <option value=3.5>Dusk Ball if used inside cave</option>
    <option value=4>Quick ball if used on first turn</option>
    <option value='timerBall'>Timer Ball</option>
</select>

​

Answer 2

首先，确保在解析完所有的超文本标记语言并在select中做出选择之后，script才能执行。您的代码没有显示任何事件处理，因此我们可能会假设您正在尝试在进行任何选择之前获取所选值。

下面是您应该设置的内容，请注意，通过简单地请求select的value来获取所选选项值要比获取selectedIndex值简单得多。

​

<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
  <meta charset="utf-8">
</head>
<body>
  <select name = 'pokeball2' id="pokeballType">
        <option value=1 selected = 'selected'>Pokeball</option>
        <option value=2>Ultra Ball</option>
        <option value=1.5>Great Ball</option>
        <option value=3.5>Dusk Ball if used inside cave</option>
        <option value=4>Quick ball if used on first turn</option>
        <option value='timerBall'>Timer Ball</option>
  </select>
    
  <script>
    let pokeball = document.getElementById("pokeballType");
    
    // Set up an even handler for when the value of the select changes
    pokeball.addEventListener("change", function(){
      if (pokeball.value === 'timerBall') {
        console.log('Working')
      }    
    });

  </script>
</body>
</html>

​