Javascript onchange event Select input

Question

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>

Seems to work fine in Chrome. Which browser & OS you have tested this on? — palaѕн
– palaѕн, Commented Mar 6, 2018 at 15:52
Might be to do with the DOM not stabilising before the Javascript is ran. People usually work around that using jQuery's onReady() or some such equivalent. — wally
– wally, Commented Mar 6, 2018 at 15:54

messerbill · Accepted Answer · 2018-03-06 15:53:52Z

5

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>

answered Mar 6, 2018 at 15:53

messerbill

5,6391 gold badge31 silver badges39 bronze badges

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

Comments

Maurice Greenland · Accepted Answer · 2018-03-06 16:51:32Z

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

});

Collectives™ on Stack Overflow

Javascript onchange event Select input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related