我正在根据youtube教程制作一个应用程序.我已经知道正确的解决方案是什么样子的，但我不知道为什么这样的代码不起作用.它只执行一次.我在浏览器中选中"Inspector"，它显示第二个div得到了活动类，但第二次单击不起作用.
document.querySelector('.emoji').addEventListener('click', function() {
document.querySelector('.open').classList.toggle('active');
document.querySelector('.closed').classList.toggle('active');
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.emoji {
text-align: center;
font-size: 20rem;
cursor: pointer;
display: none;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.active {
display: block;
}<!-- emoji no evil ????
emoji monkey ???? -->
<div class="emoji open active">????</div>
<div class="emoji closed">????</div>现在为什么这个解决方案不起作用？
我认为我有两个元素与表情符号类，所以这应该是可行的.今天我try 创建计算器应用程序，但遇到了同样的问题.当我点击第一个按钮时，它才起作用.我知道正确的解决方案是:
document.querySelector('.open').addEventListener('click', function () {
document.querySelector('.open').classList.toggle('active');
document.querySelector('.closed').classList.toggle('active');
});
document.querySelector('.closed').addEventListener('click', function () {
document.querySelector('.closed').classList.toggle('active');
document.querySelector('.open').classList.toggle('active');
});
但我不明白为什么第一个解决方案是错误的.请你解释一下.