Блог

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

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

 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’, и несколько раз я получаю красную ошибку в консоли.журнал, а иногда я вообще ничего не получаю, и я хотел бы знать, почему?

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

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