title: How to change a text box to visible depending on what item is selected in a drop down menu?
body: <p>I have a drop-down menu with a list of school subjects in it, the last option is &quot;Add New Subject&quot; so when the user selects that option, I need a text box to appear.</p>
  <p>My HTML form looks like this: (I have only included the relevant bits, there is a bit more stuff on it.</p>
  <pre><code>&lt;form method=&quot;post&quot; action=&quot;createQuestion.php&quot; name=&quot;cq&quot;&gt;
    &lt;select name=&quot;subject&quot; id=&quot;subject&quot;&gt;
      &lt;option value=&quot;biology&quot;&gt;Biology&lt;/option&gt;
      &lt;option value=&quot;maths&quot;&gt;Maths&lt;/option&gt;
      &lt;option value=&quot;economics&quot;&gt;Economics&lt;/option&gt;
      &lt;option value=&quot;newSub&quot; &lt;?php if($subject == &quot;newSub1&quot;) { echo &quot;SELECTED&quot;; } ?&gt;&gt;
        Add New Subject
      &lt;/option&gt;
    &lt;/select&gt; 
    &lt;input type=&quot;text&quot; name=&quot;newSubtxt&quot; ID=&quot;newSubtxt&quot; style=&quot;visibility:hidden&quot;&gt; 
  &lt;/form&gt;
  </code></pre>
  <p>I have spent ages trying to get this to work with javascript, and I just can't get it to work at all.</p>
  <p>This is the js I wrote, but doesn't work</p>
  <pre class="lang-js prettyprint-override"><code>function addSubject(){
    const newSub = document.getElementById('newSub').name;
    const selectedSubject = document.getElementById('subject').value;
    if (selectedSubject === newSub){
      document.getElementById(newSubtxt).style.display = 'block';
    }
  }
  </code></pre>
  <p>I would be so grateful if someone could help me out with the javascript, so that it will work. Thanks in advance :)</p>