Cant get buttons from html calculator in JavaScript

Question

i have a sample calculator html template

  <div id="container">
        <div id="display" class="t4"></div>
        <div id="buttons">
          <div class="t1">7</div>
          <div class="t1">8</div>
          <div class="t1">9</div>
          <div class="t1">/</div>

          <div class="t1">4</div>
          <div class="t1">5</div>
          <div class="t1">6</div>
          <div class="t1">*</div>

          <div class="t1">1</div>
          <div class="t1">2</div>
          <div class="t1">3</div>
          <div class="t1">-</div>

          <div class="t1">0</div>
          <div class="t1">.</div>
          <div class="t1">+</div>
          <div id="calculate"class="t1">=</div>
        </div>

where I want to add an event listener and get the value to be the operation/number to be executed,

but whenever I try to get the div's in a variable in my javascript file, it just turns out to be null

const keys = document.querySelector('buttons');
console.log(keys)

i have also tried with the document.getElementById function

with no luck.. is it because I'm not inside a function or is it because I',m assigning it to a value?

when I do it inside a function

function myFunction() {
const buttons =document.getElementById('buttons')
console.log(buttons)
}

it works fine?

`document.getElementById('buttons')` should work. Or `document.querySelector('#buttons')` — FZs, Dec 23 '18 at 16:25
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Chris G, Dec 23 '18 at 16:37

score 2 · Answer 1 · answered Dec 23 '18 at 16:24

2

Try to execute the code after pageload

answered Dec 23 '18 at 16:24

MasterOfDesaster

159
7

AnonymousSB · Accepted Answer · 2018-12-23T16:43:23.070

The key issue is that you're using querySelector, but not passing a proper CSS style selector like .class or #id. You have a few options for getting all your "buttons" based on your existing classes or your id.

I'd highly suggest using getElementsByClassName as it is the most performant solution.

You can use one of the following

document.getElementsByClassName('t1')

document.getElementById('buttons').children

document.querySelectorAll('.t1')

Demo

var buttons1 = document.getElementsByClassName('t1');
var buttons2 = document.getElementById('buttons').children;
var buttons3 = document.querySelectorAll('.t1');

console.log(buttons1);
console.log(buttons2);
console.log(buttons3);

<div id="container">
  <div id="display" class="t4"></div>
  <div id="buttons">
    <div class="t1">7</div>
    <div class="t1">8</div>
    <div class="t1">9</div>
    <div class="t1">/</div>

    <div class="t1">4</div>
    <div class="t1">5</div>
    <div class="t1">6</div>
    <div class="t1">*</div>

    <div class="t1">1</div>
    <div class="t1">2</div>
    <div class="t1">3</div>
    <div class="t1">-</div>

    <div class="t1">0</div>
    <div class="t1">.</div>
    <div class="t1">+</div>
    <div id="calculate"class="t1">=</div>
  </div>
</div>

Performance Test

https://jsperf.com/so53905199

Documentation

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

score 1 · Answer 3 · answered Dec 23 '18 at 17:34

No need to have 16 events listeners. As I said in my comment. You have to use event delegation.

var strValue = '';

document.querySelector('#buttons').onclick = function(e) {
  e.preventDefault();
  if (e.target.className != 't1') return;

  switch (e.target.textContent){
    case '-':
      console.log('--> sub')
    break
    case '+':
      console.log('--> add')
    break
    case '/':
      console.log('--> div')
    break
    case '*':
      console.log('--> multiply')
    break
    case '=':
      console.log('--> calculate')
    break
    default:
      strValue += e.target.textContent;
      console.log(strValue)
    }
}

    #buttons {
      display : block;
      width   : 110px;
      font-size: 16px
    }
    #buttons>div {
      display : block;
      float: left;
      margin : 2px;
      width   : 20px;
      height  : 20px;
      border : 1px solid grey;
      text-align: center;
      line-height: 1.4em;
      cursor: pointer;
    }
    #buttons>div:hover {
      background-color: yellow;
    }

<div id="buttons">
  <div class="t1">7</div>
  <div class="t1">8</div>
  <div class="t1">9</div>
  <div class="t1">/</div>

  <div class="t1">4</div>
  <div class="t1">5</div>
  <div class="t1">6</div>
  <div class="t1">*</div>

  <div class="t1">1</div>
  <div class="t1">2</div>
  <div class="t1">3</div>
  <div class="t1">-</div>

  <div class="t1">0</div>
  <div class="t1">.</div>
  <div class="t1">+</div>
  <div id="calculate" class="t1">=</div>
</div>

Cant get buttons from html calculator in JavaScript

3 Answers3

Demo

Performance Test

Documentation