显示/隐藏没有内联Javascript的元素 [英] Show/hide element without inline Javascript

问题描述

当单选按钮具有特定值时，我试图显示/隐藏带有原始Javascript的元素.我可以使其与内联Javascript一起使用，但是我想尝试使用addEventListener方法来实现.

I am trying to show/hide an element with raw Javascript when a radio button has a specific value. I can get it to work with inline Javascript, but I want to try and do it using the addEventListener method.

这是我的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)".

Here is the Javascript I am using to get it to run while using the inline function, with the handler onchange="asdf(this.value)" in my HTML.

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

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

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

Here is what I have so far:

 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/

推荐答案

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

Problem #1: dog is never defined. I believe you want to check if the value of the changed element is dog, so you should do this instead:

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

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

Problem #2: getElementsByName needs to be called as a method of another object (usually document)

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

问题3:AddEventListener应该使用小写字母a.它也不能应用于getElementsByName返回的节点集合.您应该改为遍历每个元素.

Problem #3: AddEventListener should have a lowercase a. It also can't be applied to a node collection, which getElementsByName returns. You should loop through each element instead.

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

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

这篇关于显示/隐藏没有内联Javascript的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！