title: getElementsByClassName is not a function javascript
body: <p>Now I know it might seem as a duplicate, but it isn't. I read all other posts with this title, but couldn't find an answer.
  I have:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;a id="A" class="tablink"&gt;A&lt;/a&gt;
    &lt;a id="B" class=tablink"&gt;B&lt;/a&gt;
  ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want the id of above elements, to be href of another list elements from another unordered list.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;a id="1" class="subjects" &gt;1&lt;/a&gt;
    &lt;a id="2" class="subjects"&gt;2&lt;/a&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I already have this code </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(".tablink").on("click", function(){
    var char = this.getAttribute("id");
    var link = document.getElementsByClassName("subjects").getAttribute("id");
    document.getElementsByClassName("subjects").href = char + link
  
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>But it shows the error in the title. It works if I set: <code>document.getElementById("subjects")</code> and I also have to change subjects to id not to class. So it only works for one element, but I have more of them, so I assume that I have to do some kind of for loop?
  EDIT: COuld that be done with jQuery, without for loop? If yes, how?</p>