Javascript计算器-如何有效地使用同一类编程按钮而不出错？

我不断地得到“未定义”或错误，我不太清楚为什么

我试图使用一个函数单击具有相同类但不同值的多个键。要完成这项任务，我必须了解什么

let keys = document.getElementsByClassName("btn");

let displayScreen = document.getElementById("display");

function display() {
    displayScreen.innerText += keys.value;
}

display();

或

keys.onclick=（）=>{
displayScreen.innerText+=keys.value；
}
6.
5.
4.
-

我看到[objectHTML divELEMENT…]，“undefined”，有时在console.log中出现红色错误，有时什么也得不到，我想知道为什么

我理解结果或错误可能源于不正确的语法和其他因素，但我必须了解javascript的哪些方面才能将此问题降至最低？

s不应具有

.value

属性-这是为类似输入的元素保留的。但您可以提取单击元素的

textContent

，并且可以使用事件委派来避免添加大量侦听器：

constdisplayscreen=document.getElementById（“display”）；
document.querySelector（'.num keys'）.addEventListener（'click'，（{target}）=>{
如果（！target.matches（'.num keys>div'））{
返回；
}
displayScreen.textContent+=target.textContent；
});

[显示]
6.
5.
4.
-
欢迎来到堆栈溢出。这个问题似乎是调试中的一个练习。看看[如何调试小程序]（）这正是我想要的。谢谢
keys.onclick = () => {
   displayScreen.innerText += keys.value;
}

    <div class="row">
        <div class="column display" id="display"></div>
    </div>      

    <div class="row">
        <div class="keys" id="six" value="6">6</div>
        <div class="keys" id="five" value="5">5</div>
        <div class="keys" id="four" value="4">4</div>
        <div class="keys" id="minus" value="-">-</div>
    </div>