Reputation: 3347

Cant get buttons from html calculator in JavaScript

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?

Upvotes: 0

Answers (3)

Mister Jojo

Reputation: 22355

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>

Upvotes: 1

AnonymousSB

Reputation: 3604

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>