Input Textbook to Show After Radio Button is Clicked - Javascript Only

JavaScript
1

Hi, I would like to use just Javascript (rather than JQuery) to show the input textbox once the “Others” radio button is clicked. However, it is not working.

My code thus far :-
HTML

<br>
    Where do you live?
    <br>
    <input type="radio" name="addLive" value="subang">Subang Jaya<br>
    <input type="radio" name="addLive" value="petaling">Petaling Jaya<br>
    <input type="radio" name="addLive" value="kl">Kuala Lumpur<br>
    <input type="radio" name="addLive" value="shahalam">Shah Alam<br>
    <input type="radio" name="addLive" value="others" id="showAddLiveOthers">Others<br>
    <input type="text" name ="addLiveOthers" id="addLiveOthers"> 
    <br>

CSS

#addLiveOthers{
  display:none;
}

JS

function displayText(){
  if(document.getElementById('showAddLiveOthers').checked){
     document.getElementById('addLiveOthers').style.display = "block";
     }
  else {document.getElementById('addLiveOthers').style.display ="none";}
}

Is it possible for someone to advise?

Thank you.

3

There are a few steps missing. First, you’ll want an event listener attached to each radio button. It will be the same listener, so you can simply use your displayText function as the listener. But that will need to take an Event object, so you can find its event.target, in order to read the value of it.

It is a little complex, but not really too bad. Have you gone through the FCC javascript curriculum yet?

5

Thank you, I did add and onclick event on the “Others” button previously, it just did not work. I will try again. Thanks again.

6

Hi, I have gotten my “Others” button to work, however, only when i have removed the other form items and leave the radio buttons on. I have tried putting all the radio buttons and the text input in one fieldset, but it did not work. My codepen is at https://codepen.io/shirousagi/pen/QWWjYqW.

Appreciate any advice on this.

Thank you.

7

So it can work, quite well, in a fieldset. Just remember, you will need the Event object passed into your click handler.

See it working on repl.it - https://repl.it/@TobiasParent/joceysshFCCQuestion-inputTextChange

8

Hi, thank you for your kind advise. Actually, the code will work even without fieldset. I have found my error, which was at the bottom of my form (far below these radio button), where i did not close my textarea with </textarea>. This then affects the JS code where the textbox don’t show as mentioned. Apologies for taking your time when it was my error somewhere else.

Thanks again.