Eventos com JavaScript Puro

Jovem Developer · September 3, 2021 at 04:37 PM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            border-radius: 10px;
            margin: 10px;
           background-color: gray;
        }
    </style>
</head>
<body>
   <div id ="d1"></div>
   <div id ="d2"></div>
   <div id ="d3"></div>
   <div id ="d4"></div>
   <input type="color" id="cor"/>

    <script>
       var divs = document.getElementsByTagName('div');
       var input_cor = document.getElementById('cor');
       for(var i=0;i<divs.length;i++){
           divs[i].addEventListener('click', (e)=>{
               cor.addEventListener('change',function(){
                   e.target.style.background = input_cor.value;
               })
           });
       }
    </script>
    
</body>
</html>

Boa tarde!

Com este exemplo de código, estou a tentar arranjar forma de que cada vez que clico numa das "div" e sucessivamente altero a cor da "input_color", essa mesma "div" mude de cor.

De facto tudo acontece como o esperado, mas quando clico em outras "divs", numa de cada vez, para lhes alterar a cor de fundo, acontece que todas as "divs" que foram clicadas até então, alterando a cor, elas ficam todas com a mesma cor e não era suposto.

Se alguém me conseguisse ajudar, agradecia, e gostaria que de cada vez que o utilizador clicasse numa "div", o JavaScript esquecesse ou desabilitasse a "div" anterior clicada e alterasse apenas a cor da "div" clicada.

drainbamage · September 13, 2021 at 09:32 AM

Isto deve chegar:

    <script>
      var divs = document.getElementsByTagName('div');
      var input_cor = document.getElementById('cor');
      var target;
      for (var i = 0; i < divs.length; i++) {
        divs[i].addEventListener('click', (e) => {
            target=e.target
        });
      }
      input_cor.addEventListener('change', function () {
        target.style.background = input_cor.value;
      });
    </script>

no evento click das divs guardamos o target para usar mais tarde e adicionamos o event handler da cor uma única vez.

é uma solução, não será, talvez, a melhor.

Recomendo ler isto:

https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/

e isto: https://javascript.info/array-methods

Sign In

Eventos com JavaScript Puro

Recommended Posts

Jovem Developer

Link to comment

Share on other sites

drainbamage

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information