Jump to content

Eventos com JavaScript Puro


Jovem Developer
 Share

Recommended Posts

Jovem Developer
<!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.

aaaaaaaa

Link to comment
Share on other sites

drainbamage

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.