How to change a text box to visible depending on what item is selected in a drop down menu?

Issue

I have a drop-down menu with a list of school subjects in it, the last option is "Add New Subject" so when the user selects that option, I need a text box to appear.

My HTML form looks like this: (I have only included the relevant bits, there is a bit more stuff on it.

<form method="post" action="createQuestion.php" name="cq">
  <select name="subject" id="subject">
    <option value="biology">Biology</option>
    <option value="maths">Maths</option>
    <option value="economics">Economics</option>
    <option value="newSub" <?php if($subject == "newSub1") { echo "SELECTED"; } ?>>
      Add New Subject
    </option>
  </select> 
  <input type="text" name="newSubtxt" ID="newSubtxt" style="visibility:hidden"> 
</form>

I have spent ages trying to get this to work with javascript, and I just can't get it to work at all.

This is the js I wrote, but doesn't work

function addSubject(){
  const newSub = document.getElementById('newSub').name;
  const selectedSubject = document.getElementById('subject').value;
  if (selectedSubject === newSub){
    document.getElementById(newSubtxt).style.display = 'block';
  }
}

I would be so grateful if someone could help me out with the javascript, so that it will work. Thanks in advance :)

Solution

Change your invisible input to:

<input type="text" name="newSubtxt" id="newSubtxt" style="display: none" />

and your js:

function addSubject() {
    var selectedSubject = document.getElementById('subject').value;
    if (selectedSubject == 'newSub') {
        document.getElementById('newSubtxt').style.display = 'block';
    }
}

Also see my jsfiddle.

Answered By - scessor