Question

我想在下面获得结果，但不知道如何。

通过单击按钮将框的颜色从黄色更改为红色。
通过单击红色框显示警报。

第一个使用我的代码。但是第二个不起作用。

有人可以帮我吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color:yellow;
        }
        .box.red {
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="#" class="button">Click</a>
    <div class="box">BOX</div>

    <script>
        document.querySelector('.button').addEventListener('click', () => {
           document.querySelector('.box').classList.add('red');
        });

        document.querySelector('.box.red').addEventListener('click', () => {
            window.alert('You clicked Red Box');
        });
    </script>

</body>
</html>

Answer 1

问题在于，当您当时附加第二个侦听器时，class = red中没有任何元素。

您应将onclick事件更改为第一个事件中的第二个，在这种情况下，请勿使用addEventListener。

let btn = document.querySelector('.button');
btn.onclick = function(){
  document.querySelector('.box').classList.add('red');
  document.querySelector('.red').onclick = function(){
    window.alert('You clicked Red Box');
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color:yellow;
        }
        .box.red {
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="#" class="button">Click</a>
    <div class="box">BOX</div>


</body>
</html>

如何将事件设置为通过.classList.add添加类的选择器

1 个答案: