Javascript Calculator - Как эффективно программировать кнопки с одинаковым классом без ошибок? - PullRequest
Новая
       8

Javascript Calculator - Как эффективно программировать кнопки с одинаковым классом без ошибок?

0 голосов
/ 14 апреля 2019

Я получаю «неопределенные» или ошибки, и я не совсем уверен, почему.

Я пытаюсь нажать несколько клавиш с одним и тем же классом, но разными значениями, используя одну функцию.Что я должен понять, чтобы выполнить эту задачу? 

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, чтобы минимизировать эту проблему?

1 Ответ

0 голосов
/ 14 апреля 2019

<div> s не должно иметь свойства .value - оно зарезервировано для элементов, подобных вводу.Но вы можете извлечь textContent элемента clicked element и использовать делегирование события, чтобы избежать добавления тонны слушателей: 

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>
...