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/

nderscore · Accepted Answer · 2013-12-16 04:02:51Z

1

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/

answered Dec 16, 2013 at 4:02

nderscore

4,28125 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PSL · Accepted Answer · 2013-12-16 04:07:32Z

1

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

edited Dec 16, 2013 at 4:07

answered Dec 16, 2013 at 4:02

PSL

124k21 gold badges257 silver badges243 bronze badges

1 Comment

Nick D Over a year ago

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?

Collectives™ on Stack Overflow

Show/hide element without inline Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related