javascript - 在没有内联 Javascript 的情况下显示/隐藏元素

Question

当单选按钮具有特定值时，我尝试使用原始 Javascript 显示/隐藏元素。我可以让它与内联 Javascript 一起工作，但我想尝试使用 addEventListener 方法来完成它。

这是我的 HTML:

 <label for="petType">Type of Pet: </label>Cat<input" class="radio" name="petType" type="radio" id="petType" value="cat">Dog<input class="radio" name="petType" id="petType" type="radio" value="dog">Other<input class="radio" name="petType" id="petType" type="radio" value="other">
        <label for="state">Breed:</label>
        <select id="breed">
          <option>Shiba Inus</option>
          <option>Pembroke Welsh Corgi</option>
          <option>Boxer</option>
          <option>English Bulldog</option>

        </select>

这是我用来让它在使用内联函数时运行的 Javascript，并在 HTML 中使用处理程序 onchange="asdf(this.value)"。

 function asdf(x) {
     var breed = document.getElementById('breed');
  if (dog == "dog") {
    breed.style.display = "inline";

  }
  else {
    breed.style.display = "none";
  }
}

这是我到目前为止所拥有的:

 function asdf(x) {
     var breed = document.getElementById('breed');
  if (dog == "dog") {
    breed.style.display = "inline";

  }
  else {
    breed.style.display = "none";
  }
}

var typeOfPet = getElementsByName('petType');

typeOfPet.addEventListener('change', asdf, false);

fiddle :http://jsfiddle.net/ePDx9/

Answer 1

问题#1:dog 从未被定义。我相信您想检查更改后的元素的值是否为狗，因此您应该这样做:

if (this.value == "dog") {

问题#2:getElementsByName需要作为另一个对象(通常是文档)的方法来调用

var typeOfPet = document.getElementsByName('petType');

问题#3:AddEventListener 应该有一个小写的 a。它也不能应用于 getElementsByName 返回的节点集合。您应该循环遍历每个元素。

for(var i = typeOfPet.length; i--;) {
    typeOfPet[i].addEventListener('change', asdf, false);
}

工作版本:http://jsfiddle.net/nderscore/ePDx9/6/