How to set event to the Selector which is added class with .classList.add

Question

I want to get result below but don't know how.

change box colors yellow to red by clicking button.
show alert by clicking red box.

1st one works with my code. But the 2nd one doesn't work.

Could someone help me with this?

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

The problem is this when you attach second listener at that time there is no element with class = red .

You should change the onclick event to second one inside first one and don't use addEventListener in this case.

 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>

How to set event to the Selector which is added class with .classList.add

Question

1 answers

solution1
0 ACCPTED 2019-07-04 14:58:36

How to set event to the Selector which is added class with .classList.add

Question

1 answers

solution1 0 ACCPTED 2019-07-04 14:58:36

solution1
0 ACCPTED 2019-07-04 14:58:36