title: Put focus inside a textarea with variable name using javascript
body: <p>I have a site that lists several upcoming events, and each event has a comment button to leave comments. It looks like this (it's in swedish, but I think you can figure out the structure):</p>
  
  <p><img src="https://i.stack.imgur.com/trals.png"><br/><sub>(source: <a href="http://www.shipit.se/dump/event.png" rel="nofollow noreferrer">shipit.se</a>)</sub><br/></p>
  
  <p>The div containing the textarea for writing the comment is initially hidden, and when clicking the 'comment'-icon it is displayed using the following javascript:</p>
  
  <pre><code>&lt;script language="javascript" type='text/javascript'&gt;
      function showhide_comment(comment_id, change_id) {
          if (document.getElementById(comment_id).style.display == 'none') { 
              if (document.getElementById(change_id).style.display == 'block') {
                  document.getElementById(change_id).style.display = 'none';
                  document.getElementById(comment_id).style.display = 'block';
                  document.getElementById(change_id).style.display = 'block';
              } else {
                  document.getElementById(comment_id).style.display = 'block';
              }
          } else {
              if (document.getElementById(change_id).style.display == 'block') {
                  document.getElementById(change_id).style.display = 'none';
                  document.getElementById(comment_id).style.display = 'none';
                  document.getElementById(change_id).style.display = 'block';
              } else {
                  document.getElementById(comment_id).style.display = 'none';
              }
          }   
      }
  </code></pre>
  
  <p>The script contains a hack to display the hidden div correctly in IE when another (initially hidden) div is also displayed in which changes can be made to the event. But never mind that.</p>
  
  <p>The php-code to display the comment form looks like this:</p>
  
  <pre><code>//Comment form, initially hidden
              echo "&lt;div id=\"comment" . $row-&gt;id . "\" class=\"submit-comment\" style=\"display: none\"&gt;";
              echo "&lt;form name=\"make_comment\" method=\"post\" action=\"submit_comment.php\"&gt;";
              echo "Kommentar:&lt;br/&gt;";
              echo "&lt;textarea name=\"comment\" class=\"comment\" rows=\"0\" cols=\"0\"&gt;&lt;/textarea&gt;&lt;br/&gt;";
              echo "&lt;input type=\"hidden\" name=\"event_id\" value=\"$row-&gt;id\"/&gt;";
              echo "&lt;input class=\"comment\" type=\"submit\" name=\"submit_comment\" value=\"Skicka\" /&gt;";
              echo "&lt;/form&gt;";
              echo "&lt;/div&gt;";
  </code></pre>
  
  <p>This code lies inside a loop which displays all upcoming events that are stored in a mySQL database. As can be seen, the divs are given variable names like comment1, comment2, etc. in order to bind the comments to the correct event. </p>
  
  <p>This is the code to display the comment-icon and linking it to the javascript:</p>
  
  <pre><code>echo "&lt;li class=\"icon-left\"&gt;
              &lt;a href=\"javascript:showhide_comment('comment" . $row-&gt;id . "', 'change" . $row-&gt;id . "')\"&gt;
              &lt;img src=\"images/comment-24x24.png\" title=\"Kommentera körning\" alt=\"Kommentera körning\" /&gt;
              &lt;/a&gt;&lt;/li&gt;";
  </code></pre>
  
  <p>What I would like to do is to put the focus inside the correct textarea field that becomes visible when the comment-icon is clicked so that the user can start typing directly. I have tried to modify the javascript above using focus(), but I just can't get it to work. Any ideas on how I can achieve what I want?</p>
  
  <p>Thanks.</p>
  
  <p>/Linus</p>