Javascript 计算器 - 如何有效地对具有相同 class 的按钮进行编程而不会出错？

Question

我一直收到 'undefined' 或错误，我不太清楚为什么。

我正在尝试使用一个函数单击具有相同 class 但值不同的多个键。我必须了解什么才能完成这项任务？

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

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

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

display();

或

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>

我见过 [objectHTML divELEMENT...]，'undefined' 有时我会在 console.log 中收到红色错误，有时我什么也得不到，我想知道为什么？

我知道结果或错误可能源于语法不当以及其他因素，但我必须了解 javascript 的哪些内容才能最大程度地减少此问题？

Answer 1

<div>s 不应有 .value 属性 - 这是为类似输入的元素保留的。但是你可以提取被点击的元素元素的textContent，你可以使用事件委托来避免添加大量的监听器：

const displayScreen = document.getElementById("display");
document.querySelector('.num-keys').addEventListener('click', ({ target }) => {
  if (!target.matches('.num-keys > div')) {
    return;
  }
  displayScreen.textContent += target.textContent;
});

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

<div class="num-keys">
  <div>6</div>
  <div>5</div>
  <div>4</div>
  <div>-</div>
</div>

Javascript 计算器 - 如何有效地对具有相同 class 的按钮进行编程而不会出错？

Javascript Calculator - How to efficiently program buttons with same class without errors?

javascript

calculator