【javascript】入力フォームから取得したテキストをそのままボタンのvalueに代入したい

Question

フォームで入力したテキストを、登録ボタンを押すことで作成される新しいボタンのvalueに入れるコードを書きたいのですが、ボタンに表示されるテキストがUndefinedとなってしまいます。
ボタン自体は生成されるので、テキスト取得部分がおかしいと思うのですが、解決方法が分かりません。

HTML

<input class="input_user" id="touroku" placeholder="入力" type="text" >
<script src="js/main.js"></script>

javascript

{let key = 0;
  const tourokubutton = document.createElement("input");
  tourokubutton.classList.add("addition");
  tourokubutton.type = "submit";
  tourokubutton.value = "登録";
  document.body.appendChild(tourokubutton);

function userbutton() {

  const tourokubuttonClick = document.getElementsByClassName("addition")[0];
  tourokubuttonClick.addEventListener("click", ()=>{
    const textbox =document.getElementsByClassName('input_user');
    const inputvalue = textbox.value;
    const namebutton = document.createElement("input");
    namebutton.classList.add("name");
    namebutton.type = "button";
    namebutton.value = inputvalue;
    document.body.appendChild(namebutton);
  },false);
}
userbutton()
}

回答よろしくお願いいたします。

Comments

[yambejp]

popupやtourokubuttonClickに該当するHTML要素がないみたいですが

[int32_t]

ブラウザの開発者ツールのコンソールにエラーが出ていませんか?

Answer 1

const textbox =document.getElementsByClassName('input_user');
const inputvalue = textbox.value;

getElementsByClassName() の戻り値は HTMLCollection で、HTMLCollection には value というプロパティがないので inputvalue は undefined になります。

const inputvalue = textbox[0].value;

のようなことがしたいのではないでしょうか。

Comments

[vally]

正常に動作しました。ありがとうございます。