document.querySelectorが効かない

Question

壱度目のクリックで生成されたにもかかわらず
弐度目も生成できてしまうのはなぜでしょうか？
data-bが存在しているにも関わらず生成され続けます
理由がわかりません

<script>
window.onload=function(){
input=document.createElement("input");
input.type="button";
input.value= "追加";
input.setAttribute("data-a","a");
input.addEventListener('click', function(){
if(!document.querySelector('[data-b="'+this.getAttribute("data-a")+'"]')){
alert("ok");
var audio = document.createElement('audio');
audio.autoplay = true;
audio.controls = false;
audio.setAttribute("data-b",this.getAttribute("data-a"));
document.body.appendChild(audio);
}else{
alert("no");
}
});
document.body.appendChild(input);
}
</script>

Answer 1

自己解決されているようですので参考までに

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const input=Object.assign(document.createElement("input"),{
    "type":"button",
    "value":"追加",
  });
  input.dataset.a="a";
  input.addEventListener('click',({target})=>{
    let audio=document.querySelector(`[data-b=${target.dataset.a}]`);
    if(!audio){
      alert("ok");
      audio = Object.assign(document.createElement('audio'),{
        "autoplay":true,
        "controls":false, // falseだと追加されない
      });
      audio.dataset.b=target.dataset.a;
      document.body.appendChild(audio);
    }else{
      alert("no");
    }
  });
  document.body.appendChild(input);
});
</script>

Answer 2

確認不足でした
問題ないことがわかりました