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

我有一个示例计算器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>

我还尝试了

document.getElementById

函数

没有运气。。这是因为我不在函数中，还是因为我将它赋值

当我在一个函数中执行它时

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

---

它工作正常？

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

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

关键问题是您使用的是

查询选择器

，但没有传递正确的

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'）；
控制台日志（按钮1）；
控制台日志（按钮2）；
控制台日志（按钮3）

7.
8.
9
/
4.
5.
6.
*
1.
2.
3.
-
0
.
+
=
关键问题是您使用的是
查询选择器
，但没有传递正确的
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'）；
控制台日志（按钮1）；
控制台日志（按钮2）；
控制台日志（按钮3）

7.
8.
9
/
4.
5.
6.
*
1.
2.
3.
-
0
.
+
=
不需要有16个事件侦听器。正如我在评论中所说的那样。您必须使用事件委派


var strValue=''；
document.querySelector（“#按钮”）.onclick=function（e）{
e、 预防默认值（）；
if（e.target.className！=“t1”）返回；
开关（如target.textContent）{
案例'-'：
console.log（'-->sub'）
打破
格“+”：
console.log（'-->添加'）
打破
案例“/”：
console.log（'-->div'）
打破
案例“*”：
console.log（'-->multiply'）
打破
案例“=”：
console.log（'-->calculate'）
打破
违约：
strValue+=e.target.textContent；
console.log（strValue）
}
}
#按钮{
显示：块；
宽度：110px；
字号：16px
}
#按钮>div{
显示：块；
浮动：左；
保证金：2倍；
宽度：20px；
高度：20px；
边框：1px纯灰；
文本对齐：居中；
线高：1.4em；
光标：指针；
}
#按钮>div：悬停{
背景颜色：黄色；
}

7.
8.
9
/
4.
5.
6.
*
1.
2.
3.
-
0
.
+
=
不需要有16个事件侦听器。正如我在评论中所说的那样。您必须使用事件委派


var strValue=''；
document.querySelector（“#按钮”）.onclick=function（e）{
e、 预防默认值（）；
if（e.target.className！=“t1”）返回；
开关（如target.textContent）{
案例'-'：
console.log（'-->sub'）
打破
格“+”：
console.log（'-->添加'）
打破
案例“/”：
console.log（'-->div'）
打破
案例“*”：
console.log（'-->multiply'）
打破
案例“=”：
console.log（'-->calculate'）
打破
违约：
strValue+=e.target.textContent；
console.log（strValue）
}
}
#按钮{
显示：块；
宽度：110px；
字号：16px
}
#按钮>div{
显示：块；
浮动：左；
保证金：2倍；
宽度：20px；
高度：20px；
边框：1px纯灰；
文本对齐：居中；
线高：1.4em；
光标：指针；
}
#按钮>div：悬停{
背景颜色：黄色；
}

7.
8.
9
/
4.
5.
6.
*
1.
2.
3.
-
0
.
+
=
document.getElementById（'buttons'）
应该可以工作。或者
document.querySelector（“#按钮”）
链接问题的可能重复与jquery无关，您必须了解委托事件
document.getElementById（'buttons'）
。或者
document.querySelector（“#按钮”）
链接问题的可能重复与jquery无关，您必须了解委托事件