Change DIV color when clicked on condition (JS)

Question

Change DIV color when clicked on condition (JS)

Asked 3 years, 9 months ago

Viewed 66 times

0

I am starting in js and I was doing some studies and practicing, but I stopped here, I would like to change the color of these three Divs when we click individually on each one to yellow, but when we clicked back on it, return the standard color that was black. I tried applying some Ifs but unsuccessfully on how to condition using the standard color, could someone give a light please?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

        <div id="jan1"></div>
        <div id="jan2"></div>
        <div id="jan3"></div>
        <script src="main.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0; 
    background: green;
    /*display: flex;
    justify-content: center;
    align-items: center;*/
}

#jan1{
    width: 80px;
    height: 120px;
    background: black;
    display: inline-block;
}

#jan2{
    width: 80px;
    height: 120px;
    background: black;
    display: inline-block;
}

#jan3{
    width: 80px;
    height: 120px;
    background: black;
    display: inline-block;
}

JS

let jan1 = document.getElementById('jan1');
let jan2 = document.getElementById('jan2');
let jan3 = document.getElementById('jan3');

jan1.addEventListener('click', () =>{
        jan1.style.background = 'yellow';
})

jan2.addEventListener('click', () =>{
        jan2.style.background = 'yellow';
})

jan3.addEventListener('click', () =>{
        jan3.style.background = 'yellow';
})

Guy creates a class type . Yellow {background: Yellow}, and when you click the element vc makes a toggleClass

– hugocsl

2021/02/12 at 14:19
@Hugocsl cool, I didn’t even think of it that way, thank you

– Marcos Rocha Prado

2021/02/12 at 14:42

1 answer

Browser other questions tagged javascript html css dom

You are not signed in. Login or sign up in order to post.

by Ricardo Pontual • **21,129** points · Answer 1 · 2021-02-12T14:30:58+00:00

It would be easier to put that style in a class, and use the toggle to add/remove the class:

// use a classe "trocacor" para pegar todos os divs de uma vez e reaproveitar o código
document.querySelectorAll('.trocacor').forEach(div => {
  // para cada div, adiciono o evento click
  div.addEventListener('click', event => {
    // faz o toggle da classe, adiciona se não exitir, remove se existir
    div.classList.toggle('amarelo');
  })
})

*{
    margin: 0;
    padding: 0; 
    background: green;
    /*display: flex;
    justify-content: center;
    align-items: center;*/
}

#jan1{
    width: 80px;
    height: 120px;
    background: black;
    display: inline-block;
}

#jan2{
    width: 80px;
    height: 120px;
    background: black;
    display: inline-block;
}

#jan3{
    width: 80px;
    height: 120px;
    background: black;
    display: inline-block;
}

.amarelo {
  background-color: yellow !important;
}

<div class="trocacor" id="jan1"></div>
<div class="trocacor" id="jan2"></div>
<div class="trocacor" id="jan3"></div>