1

Tenho duas listas e queria que fazer com que ao clicar primeiro na primeira lista e, depois na segunda, realizar uma função para deixar os dois itens verdes.

<p class="question"><span class="mark-question">1.</span> Relacione as fabricantes aos seus veículos</p>
<ul class="first-column">
    <li data-answer="0,5">Ford</li>
    <li data-answer="2">Fiat</li>
    <li data-answer="3">Renault</li>
    <li data-answer="">Ferrari</li>
    <li data-answer="4" id="honda">Honda</li>
    <li data-answer="1">Chevrolet</li>
</ul>

<ul class="second-column">
    <li>Edge</li>
    <li>Ônix</li>
    <li>Palio</li>
    <li>Sandero</li>
    <li id="civic">Civic</li>
    <li>Fusion</li>
    <li>Fusquinha</li>
</ul>

1 Resposta 1

1

Cria uma variável clicked (por exemplo) para guardar o elemento já clicado. Depois podes fazer uma lógica simples para colorir quando clicares e a variável já tiver um elemento lá.

let clicked = null;
const first = document.querySelector('.first-column');
const second = document.querySelector('.second-column');

first.addEventListener('click', clickChecker);
second.addEventListener('click', clickChecker);

function clickChecker(e) {
  const el = e.target;
  if (!clicked) return clicked = el;
  else style(clicked, el);
  clicked = null;
}

function style(a, b) {
  a.style.backgroundColor = b.style.backgroundColor = '#ccf';
}
<p class="question"><span class="mark-question">1.</span> Relacione as fabricantes aos seus veículos</p>
<ul class="first-column">
  <li data-answer="0,5">Ford</li>
  <li data-answer="2">Fiat</li>
  <li data-answer="3">Renault</li>
  <li data-answer="">Ferrari</li>
  <li data-answer="4" id="honda">Honda</li>
  <li data-answer="1">Chevrolet</li>
</ul>

<ul class="second-column">
  <li>Edge</li>
  <li>Ônix</li>
  <li>Palio</li>
  <li>Sandero</li>
  <li id="civic">Civic</li>
  <li>Fusion</li>
  <li>Fusquinha</li>
</ul>

6
  • Poxa valeu mano! Mas, como eu poderia utilizar o data para definir quando deveria realizar a função de mudar a cor ou não? Por exemplo, queria que só mudasse a cor quando eu clicasse primeiro no "Honda" e depois no "Civic". 10/08/2017 às 19:27
  • @PedroLucasFlor nesse caso podes juntar if (!clicked && !this.classList.contains('first-column')) return clicked = null; antes do primeiro if na função.
    – Sergio
    10/08/2017 às 19:30
  • Muito obrigado mesmo! Mas, uma última pergunta copiei seu código para ver como funcionava e o chrome está me informando essa mensagem "Uncaught TypeError: Cannot read property 'addEventListener' of null at main.js:5". Já tive esse problema com addEventListener. Saberia me informar o porquê? 10/08/2017 às 19:39
  • @PedroLucasFlor isso quer dizer que o document.querySelector não encontrou os elementos na página e por isso uma das variáveis first ou second não tem valor.
    – Sergio
    10/08/2017 às 19:43
  • Consegui resolver! Eu estava chamando o script no head. Isso fazia com que "first-column" e "second-column" não existissem 10/08/2017 às 19:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .