【JavaScript】入力フォームに前回使用した文字を入れた際にアラートを出したい

実現したいもの

HTMLとjavascriptを使用して、入力した文字を使用してボタンを作成するコードを書いています。
例）たかしと入力すると「たかし」と書かれたボタンが表示される
既に「たかし」のボタンがあった場合、window.alertなどで「同じ名前のボタンは作成できません」という警告を出したいと考えています。
上手く表示する方法はないでしょうか？

該当のソースコード

<HTML>
<body>
<div id="popup">ユーザー名　<input class="input_user" id="touroku" placeholder="入力" type="text" name="input_text">
</body>
</HTML>
<script>
const tourokubutton = document.createElement("input");
  tourokubutton.classList.add('addition');
  tourokubutton.type = 'submit';
  tourokubutton.value = '登録';
  document.body.appendChild(tourokubutton)
function clickbutton() {
  const tourokubuttonClick = document.getElementsByClassName('addition')[0];
  tourokubuttonClick.addEventListener('click', ()=>{
    const textbox =document.getElementsByClassName('input_user');
    const inputvalue = textbox[0].value;
    const namebutton = document.createElement('input');
      namebutton.classList.add('name');
      namebutton.type = 'button';
      namebutton.value = inputvalue;
      document.body.appendChild(namebutton);}
}clickbutton()
</script>

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

回答2件

ベストアンサー

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#btn').addEventListener('click',()=>{
4    const v=document.querySelector('#touroku').value;
5    if(!v){
6      alert('入力して');
7    }else if(document.querySelector(`.name[value="${v}"]`)){
8      alert('もうある');
9    }else{
10      const namebutton = Object.assign(document.createElement('input'),{type:"button",classList:"name",value:v});
11        document.body.appendChild(namebutton);
12    }
13  });
14});
15</script>
16<div id="popup">ユーザー名　
17<input class="input_user" id="touroku" placeholder="入力" type="text" name="input_text">
18<input type="button" value="登録" id="btn">
19</div>