CODEWITHSUNDEEP
javascriptonchange
Maurice Greenland
Maurice Greenland

Reputation: 315

Javascript onchange event Select input

I want a sub form to appear based on what answer I choose in a select input. I can't understand why its not working. No error messages in console, but nothing happens.

document.getElementById('isAthlete').onchange = function(){
if(this.value == 'yes'){
   document.getElementById('athleteQ').style.display = '';
   } else {
   document.getElementById('athleteQ').style.display = 'none';
   }
};
<p>If I select 'yes': <br>

<select id='isAthlete' name='isAthlete'>
                <option value="-">-</option>
                <option value="yes">yes</option>
                <option value="no">no</option>
    </select>

<p>Then I want to display these inputs: <br>

<div id='athleteQ' style='display: none'>
    Sport?<input type='text' id='sport' name='sport'><br>
    Medals?<input type='text' id='medals' name='medals'><br>
    Comps?<input type='text' id='competitions' name='competitions'><br>
</div>

Upvotes: 3

Views: 3497

Answers (2)

Maurice Greenland
Maurice Greenland

Reputation: 315

Ok, found my error. I had put everything INSIDE of my 'click' event listener (which was handling the rest of my form - not included in the question) - which was a stupid thing to do!

Here is how it looks now, and it works. Its ugly, but im not finished.

PS- this was not the main focus of what I was trying to learn. Im trying to practice using Object Constructors.

Codepen: https://codepen.io/acekicker77/pen/GQVKEe?editors=0010 - rest of code

//ONCHANGE EVENT
document.getElementById('isAthlete').onchange = function(){
if(this.value == 'yes'){
   document.getElementById('athleteQ').style.display = 'block';
   } else {
   document.getElementById('athleteQ').style.display = 'none';
   }
}

//Get Form Input Values
document.querySelector('#enter').addEventListener('click', function(){
        //Get values from form
        name = document.querySelector('#name').value;
        dateInput = document.querySelector('#yob').value;
        yob = new Date(dateInput);
        yob = yob.getFullYear(dateInput);
        gender = document.querySelector('.gender').value;
        sport = document.querySelector('#sport').value;
        medals = document.querySelector('#medals').value;
        competitions = document.querySelector('#competitions').value;

        //CREATE INSTANCE
        newInstance(name, yob, gender, athlete);

        //Display Result
        document.querySelector('#result').innerHTML = doMessage(Peep.name, Peep.yearBirth, Peep.calcAge(), Peep.gender, Peep.isAthlete);

});

Upvotes: 0

messerbill
messerbill

Reputation: 5639

you were really really close - just add 'block' instead of '' then it should be displayed (tested in chrome and safari on MacOS High Sierra):

document.getElementById('isAthlete').onchange = function(){
if(this.value == 'yes'){
   document.getElementById('athleteQ').style.display = 'block';
   } else {
   document.getElementById('athleteQ').style.display = 'none';
   }
};
<select id='isAthlete' name='isAthlete'>
  <option value="-">-</option>
  <option value="yes">yes</option>
  <option value="no">no</option>
</select>

<div id='athleteQ' style='display: none'>
    Sport?<input type='text' id='sport' name='sport'><br>
    Medals?<input type='text' id='medals' name='medals'><br>
    Comps?<input type='text' id='competitions' name='competitions'><br>
</div>

Upvotes: 5

Related Questions