[HTML]ページが表示された時に入力欄にカーソルが表示されてるようにしたい

前提・実現したいこと

ページが表示された時に入力欄にカーソルが表示されてるようにしたいです。
入力欄にいちいちカーソルを合わせなくてもいきなり文字の入力ができる状態。

試してみたこと

入力欄（"answer"）が生成された時に

 <div class="center">
       <img src="image/002.png" alt="monster" width="450" height="450"/>
       <div class="question"></div>
      </div>
    <div class="container">
      <input class="answer" value="" />
      <script type="container/javascript">
         document.getElementById('answer').focus();
      </script>
    </div>

としてみましたが、何も変わらなかったです…
お力添えいただきたく、何卒宜しくお願い致します…

ソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>テスト</title>
    <style>
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     html, body {
	background-image: url("image/001.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
    height: 100%;
     }
     body {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }
     .question {
       font-size: 32px;
       font-weight: bold;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       color: black;
     }
     .answer {
       font-size: 32px;
       margin: 16px;
       border: none;
       appearance: none;
       padding: .5em .6em;
       display: inline-block;
       border: 2px solid #ccc;
       border-color: white;
       border-radius: 4px;
       vertical-align: middle;
       text-align: center;
       background-color: rgba( 0, 0, 0, 0.75 );
       color: white;
       height: 5em;
       width: 18em;
       position: relative;
       top: 20px;
     }
     .answer:focus {
       outline: 0;
       border-color: white;
     }
     .center {
 position: relative;
}
.center img {
  display: block;
  position: relative;
  top: 18%;
  z-index: 0;
}
.center img:hover{
    animation: rumble 0.1s linear infinite;
}
@keyframes rumble{
	0%	{transform:rotate(0deg)	translate(0,0);}
	12.5%	{transform:rotate(0.4deg)	translate(1px,-1px);}
	25%	{transform:rotate(0.8deg)	translate(0px,1px);}
	37.5%	{transform:rotate(0.4deg)	translate(-1px,0);}
	50%	{transform:rotate(0deg)	translate(0,0);}
	62.5%	{transform:rotate(-0.4deg)	translate(1px,0);}
	75%	{transform:rotate(-0.8deg)	translate(0,1px);}
	87.5%	{transform:rotate(-0.4deg)	translate(-1px,-1px);}
	100%	{transform:rotate(0deg)	translate(0,0);}
}
.center .question {
  margin: auto;
  width: 100%;
  height: 1em;
  position: absolute;
  top: 75%;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}
    </style>
  </head>
  <body> 
      <div class="center">
       <img src="image/002.png" alt="monster" width="450" height="450"/>
       <div class="question"></div>
      </div>
    <div class="container">
      <input class="answer" value="" />
    </div>

    <script>
     const questions = [
       '旭川',
       '帯広',
     ]
     const answers = [
       'asahikawa',
       'obihiro',
     ]

     const question = document.querySelector('.question')
     const answer = document.querySelector('.answer')
     const swal = require("sweetalert2")
     let index
     let count = 0

     function next() {
       if (count === 1) {
         swal('Congratulations!')
         document.location.reload();
         return
       }

       if (questions.length) {
         count ++
         index = Math.floor(Math.random() * questions.length)
         question.textContent = questions[index]
       }
     }

     answer.addEventListener('keydown', (event) => {
       if (event.keyCode === 13) {
         if (answers[index] === answer.value) {
           questions.splice(index, 1)
           answers.splice(index, 1)
           answer.value = ''
           next()
         }
       }
     })
     next()
    </script>
  </body>
</html>

追記

以下に変更することで無事に解決しました！！

      <div class="center">
       <img src="image/002.png" alt="monster" width="450" height="450"/>
       <div class="question"></div>
      </div>
    <div class="container">
      <input class="answer" value="" />
      <script>
        var ans = document.getElementsByClassName('answer')[0];
        ans.focus();
      </script>

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<input class="answer" value="" />
2<script type="container/javascript">
3   document.getElementById('answer').focus();
4</script>

id="answer" を持つ要素がご提示のコード中には見つかりません。 document.getElementsByClassName('answer')[0] か、 document.querySelector('.answer') でアクセスできると思います。

投稿2020/03/09 09:56

thyda.eiqau

総合スコア2982

Jonny_dayo

2020/03/09 10:14

回答ありがとうございます！ご提示頂いたコードに修正してみたものの変化せず… getElementsByClassNameで少し勉強してみます…

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！