无法从JavaScript中的html计算器获取按钮

Question

我有一个示例计算器html模板

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

我要在其中添加事件侦听器并获取要执行的操作/编号的值，

但是每当我尝试在javascript文件的变量中获取div时，结果就是null

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

我也尝试过使用document.getElementById函数

没有运气..是因为我不在函数内部还是因为我正在将其分配给值？

当我在函数中执行此操作

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

工作正常吗？

Answer 1

尝试在页面加载后执行代码

Answer 2

关键问题在于您正在使用querySelector，但没有传递适当的CSS样式选择器，例如.class或#id。您可以根据现有的类或ID来获取所有“按钮”的几种选择。

我强烈建议使用getElementsByClassName，因为它是性能最高的解决方案。

您可以使用以下其中之一

document.getElementsByClassName('t1')

document.getElementById('buttons').children

document.querySelectorAll('.t1')

演示

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>

性能测试

https://jsperf.com/so53905199

文档

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

Answer 3

不需要16个事件侦听器。正如我在评论中所说。您必须使用事件委托。

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>