Попытка изменить отображение между двумя элементами div, а затем сфокусироваться на текстовой области, содержащейся в новом видимом элементе div

Question

У меня есть два divs, содержащие textareas. Один из них установлен на display= block; по умолчанию, а другой на display: none; Когда я нажимаю на ссылку

<a href='#' onclick='showFunction()' name='reply'>Reply</a>

Я хочу сделать ввод по умолчанию display: none;, а другой display: block;. Я также хочу сосредоточиться на отображаемом вводе (который будет в нижней части прокрутки), чтобы пользователь мог просто начать печатать. Мой jquery в лучшем случае слаб, поэтому вот что у меня есть:

    var id = '<?php echo $blog_comment_id; ?>';
    function showFunction() {
      var x = document.getElementById(id);
      var y = document.getElementById('#top_input');
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }

      y.style.display = "none";
      document.getElementById('#focus_here').focus();
    }

Прямо сейчас отображается скрытый ввод, который по умолчанию, обозначенный id="top_input", ничего не делает и не фокусируется на textarea, обозначенном id="focus_here".

Вот соответствующий HTML-код для divs. Первый показывает по умолчанию:

<div class='post-comments-list' style="overflow: hidden; display: block;" id="top_input">
    <div class='pw-box add-comment-box' style="margin-top: 2px !important; background: #f7f7f7;">
        <form action="blog_comment_frame.php?post_id=<?php echo $post_id; ?>" id="comment_form" name="postComment<?php echo $post_id; ?>" method="POST">
            <textarea class='post-textarea' name="post_body" required="required" placeholder="Comment here..."></textarea>
            <div class='pw-box-btn'>
                <button class='post-button button' name="postComment<?php echo $post_id ?>" value="ADD">
                    Post
                </button>
            </div>
        </form>
    </div><br> 

Другой не отображается:

<div class='post-comments-list' id="<?php echo $blog_comment_id; ?>" style="overflow: hidden; display: none;">
    <div class='pw-box add-comment-box' style="margin-top: 2px !important; background: #f7f7f7;">
        <form action="blog_comment_frame.php?post_id=<?php echo $post_id; ?>" id="comment_form" name="postComment<?php echo $post_id; ?>" method="POST">
            <textarea class='post-textarea' id="focus_here" name="post_body" required="required" placeholder="Comment here..."></textarea>
            <div class='pw-box-btn'>
                <button class='post-button button' name="postComment<?php echo $post_id ?>" value="ADD">
                    Post
                </button>
            </div>
        </form>
    </div>
</div>

Я сделал все возможное, чтобы попытаться собрать воедино другие посты; это все, что я могу сделать, поскольку jquery не у меня под рукой, но, к сожалению, он все еще не работает должным образом. Любая помощь / ссылки приветствуются.

Обновление

Как уже упоминалось в комментариях, мне не нужно пропускать знак #, поэтому я удалил это. Теперь я пытаюсь заставить его сфокусироваться на textarea, а также прокрутить до дна, поскольку я не уверен, что одна только фокусировка автоматически прокрутит к месту. textarea всегда будет внизу, так почему бы и нет.

Вот новый код:

var id = '<?php echo $blog_comment_id; ?>';
function showFunction() {
  var x = document.getElementById(id);
  var y = document.getElementById('top_input');
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

  y.style.display = "none";
  // document.getElementById('focus_here').focus();
 //  $("#reply").click(function(){
    //     $(this).next("#comment_form_see").find("textarea").focus();
    //     return false;
    // });

    window.setTimeout(function(){
           document.getElementById("focus_here").focus();
    },0);

  var iframe = $('#iFrameAutocast').contents();
    iframe.scrollTop(880);
}

В результате я получаю, что значение по умолчанию div исчезает, а скрытое div отображается, как и ожидалось. Однако я не фокусируюсь на textarea и не прокручиваю до дна. Я попробовал другой метод для фокуса, который был закомментирован. Это тоже не сработало.

Answer 1

Во-первых, как упоминалось в комментариях, getElementById ожидает идентификатор, поэтому вы можете потерять знак #.

Во-вторых, есть странное решение - не работать и использовать setTimeout. По-видимому, команда focus работает не так, как ожидалось, в браузерах и во всех ситуациях.

window.setTimeout(function(){
       document.getElementById("focus_here").focus();
},0);

Answer 2

Я отправлю ответ, если он кому-нибудь поможет.Я изменил тег <a> выше на этот:

<a href='#' onclick='showFunction($blog_comment_id)' name='reply'>Reply</a>

, поэтому передавал данные в функцию.Затем я изменил это:

    function showFunction(id) {
      var x = document.getElementById(id);
      var y = document.getElementById("top_input");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }

      y.style.display = "none";

        window.setTimeout(function(){
               document.getElementById("focus_here" + id).focus();
        },0);
    }

Функции, как ожидалось.Я использую этот материал все больше и больше, время брать уроки!