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

小提琴：http://jsfiddle.net/ePDx9/

Answer 1

尝试：

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

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

 var typeOfPet = document.getElementsByName('petType'); //Get the elements by name
 for (var i = 0, l = typeOfPet.length; i < l; i++) { //Loop through them
     typeOfPet[i].addEventListener('change', asdf, false); //Bind listener to them each of them.
 }

<强> Demo

getElementsByName不是需要在文档或元素上应用的独立方法。
getElementsByName返回一个节点集合（实时），因此您需要循环它们并对每个节点集合应用绑定。
addEventListener的套管和对元素的绑定不正确。
要查找当前广播的值，只需使用this.value并进行比较

Answer 2

问题＃1：永远不会定义dog。我相信你想检查更改元素的值是否为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/

显示/隐藏没有内联Javascript的元素

2 个答案: