Show/hide element without inline Javascript

Question

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.

Here is my 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>

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

Fiddle: http://jsfiddle.net/ePDx9/

PSL · Answer 1 · 2013-12-16T04:07:32.567

Try:

 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 is not a standalone method it needs to be applied on document or element.
getElementsByName returns a node collection (live), so you need to loop though them and apply binding on each of them.
Casing of addEventListener and binding on the element was incorrect.
In order to look for the value of current radio just use this.value and do the comparison

This works! I remember reading somewhere that getElementsByName wouldn't work on its own for some reason. Why do we have to loop through it? — Nick D, Dec 16 '13 at 04:06

score 1 · Accepted Answer · answered Dec 16 '13 at 04:02

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") {

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

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

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

Working version: http://jsfiddle.net/nderscore/ePDx9/6/

Show/hide element without inline Javascript

2 Answers2

Linked

Related