inputタグのvalue属性を取得して、別の場所に出力したい

Question

javascript初学者です。
DOM操作の練習で日報ツールを作ろうと思い、inputタグに入れたテキストをtaskクラスに書き出すという簡単な動きを実装したいのですが、動きません。consoleを見てみましたが、エラー文は出ていませんでした。ソースコードは下記の通りなのですが、何が原因なのでしょうか。。

<div class="input">
  <div class="input-box" id="input-box">
    <p class="input-box-ttl">【タスク名】</p>
    <input type="text" id="input" onchange="myfunc(this.value)">
  </div>
</div>
<div class="output">
  ■【<span class="task"></span>】
</div>

function myfunc(value) {
  //taskクラスを取得
  var task = document.getElementsByClassName('task');
   //inputタグの中のvalueを取得
  var input = document.getElementById('input').value;
   //taskクラスにinputタグのvalueを出力
  task.textContent = input;
}

Answer 1

「getElementsByClassName」で得られるのはHTMLCollectionといって
複数のHTML要素の集合体です（仮に合致するHTMLが１つしかなくても）
なのでそこから0番目の要素を拾ってやる必要があります
UIやHTML構成にやや難ありますがとりあえず以下で動くには動くでしょう

var task = document.getElementsByClassName('task');
↓↓↓
var task = document.getElementsByClassName('task')[0];

Comments

[nyoro]

少し調べてみたのですが、getElementsByClassNameとgetElementByIdだと返り値に違いがあるのですね。。勉強になりました。ありがとうございます！！

Answer 2

var task = document.getElementsByClassName('task');

document.getElementsByClassNameで要素を取得されていますが、これは配列で返されるため、task.textContentは存在していません。

document.getElementsByClassNameを使いたいのであれば

var task = document.getElementsByClassName('task')[0];

などとすれば動くと思いますが、そもそも一つしか無いのであればidを付与するべきですね。