title: How to get selected value of <a> tag from html?
body: <p>This is my drop down</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;dropdown&quot; &gt;
      &lt;button onclick=&quot;myFunction()&quot; class=&quot;dropbtn&quot;&gt;Course List&lt;/button&gt;
      &lt;div id=&quot;myDropdown&quot; class=&quot;dropdown-content&quot;&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Search..&quot; id=&quot;myInput&quot; onkeyup=&quot;filterFunction()&quot;&gt;
  
          {% for list in list1%}
              &lt;a id=&quot;courseName&quot; onclick=&quot;addCourse()&quot;&gt; {{list.courseName}}&lt;/a&gt;
          {% endfor %}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>here i am trying to access value of the selected course name</p>
  <pre class="lang-js prettyprint-override"><code>function addCourse() {
      var x = document.getElementById(&quot;courseName&quot;).value
      document.getElementById(&quot;demo&quot;).innerHTML = x;
  }
  </code></pre>
  <p>But this is giving me &quot;undefined&quot; as a result.</p>