获得；app.js:44未捕获类型错误：btn.addEventListener不是函数；在javascript计算器I'；I’我在努力

我已经链接了html和css，但是由于某些原因，代码中的这些行中不断出现这个错误 btnMaker上的

（app.js:44）
在app.js:8
在Array.forEach（）处

init（app.js:6） 我用纯javascript制作了这个计算器，但为它创建了一个HTMl和CSS前端，并改变了一些东西，但我仍然坚持认为我做错了什么。有什么想法吗？提前谢谢

window.addEventListener('DOMContentLoaded', init);
const opts = ['*', '/', '+', '-', '9', '8', '7', '6', '5', '4', '3', '2', '1', '0', '.']; //all keys
const spec = ['*', '/', '+', '-']; //special function keys
function init() {

  opts.forEach(function (val) {
    //console.log(val);
    btnMaker(val, addOutput);
  })
  btnMaker('=', evalOutput);
  btnMaker('C', clrOutput);

  function cOutput(v) {
    output.style.border = v + ' 1px solid';
    output.style.color = v;
  }

  function evalOutput() {
    cOutput('black');
    console.log('=');
    if (output.value === "") {
      cOutput('red');
    }
    else if (eva) {
      cOutput('red');
    }
    else {
      output.value = eval(output.value);
    }
    dec = output.value.includes('.');
  }

  function clrOutput() {
    cOutput('black');
    output.value = "";
  }

  function btnMaker(txt, myFunction) {
    let btn = document.getElementsByTagName('BUTTON');
      console.log(btn);

    btn.val = txt;
    btn.textContent = txt;
    btn.addEventListener('click', myFunction);
//    main.appendChild(btn);
  }

  function addOutput(e) {
//    console.log(dec);
    cOutput('black');
    //console.log(e.target.val);
    let char = e.target.val;
    if (char == '.') {
      if (dec) {
        char = '';
        cOutput('red');
      }
      else {
        dec = true;
      }
    }
    eva = spec.includes(char);
    if (eva) {
      dec = false;
    }
    output.value += char;
  }
}

window.addEventListener（'DOMContentLoaded'，init）；
常量opts=['*'、'/'、'+'、'-'、'9'、'8'、'7'、'6'、'5'、'4'、'3'、'2'、'1'、'0'、'。]//所有钥匙
常量规范=['*'、'/'、'+'、'-']//特殊功能键
函数init（）{
选择forEach（功能（val）{
//控制台日志（val）；
btnMaker（val，addOutput）；
})
btnMaker（'='，蒸发量）；
btnMaker（'C'，CLR输出）；
函数输出（v）{
output.style.border=v+'1px solid'；
output.style.color=v；
}
函数evalOutput（）{
cOutput（“黑色”）；
console.log（'='）；
如果（output.value==“”）{
cOutput（“红色”）；
}
否则，如果（eva）{
cOutput（“红色”）；
}
否则{
output.value=eval（output.value）；
}
dec=输出值。包括（'.'）；
}
函数clrOutput（）{
cOutput（“黑色”）；
产值=”；
}
函数btnMaker（txt，myFunction）{
const main=document.getElementById（“#main”）
const textNode=document.createTextNode（txt）
const btn=document.createElement（'按钮'）
btn.appendChild（textNode）；
btn.value=txt；
控制台日志（btn）；
btn.addEventListener（'click'，myFunction）；
文件.正文.附件（btn）；
}
函数addOutput（e）{
//控制台日志（dec）；
cOutput（“黑色”）；
//console.log（e.target.val）；
设char=e.target.val；
如果（字符=='。）{
国际单项体育联合会（12月）{
char=''；
cOutput（“红色”）；
}
否则{
dec=真；
}
}
eva=规格包括（字符）；
国际单项体育联合会（eva）{
dec=假；
}
output.value+=char；
}
}

这将返回一个按钮数组（HTMLCollection）。 若要添加事件侦听器，必须在集合中选择要将其附加到的索引（如果该索引只有一个，则为0）。 因此，更改值和文本内容的正确方法是

let btnCollection = document.getElementsByTagName('BUTTON');
btnCollection[0].addEventListener('click', myFunction);

或者您可以使用ID选择器来选择特定的按钮

let btn = document.getElementById('my-special-button')

---

getElementsByTagName是复数形式-您仍然将其视为一个，检查第一项我不明白您的意思抱歉。getElementsByTagName返回一个集合-要访问单个按钮，您需要btn[0]啊，好的，我可以将事件侦听器一次连接到所有按钮吗？循环通过一个for循环？嘿，@idz22211我不确定您要将按钮放在哪里，但请检查此代码结果

let btn = document.getElementById('my-special-button')