I have the following structure, where (omitting the class .m-2
) .drop__card
would be the parent element and .circulo
one of the child elements.
<div class="m-2">
<div class="drop__card" onclick="switchColor(this);"> <!-- PADRE -->
<div class="drop__data">
<div>
<p class="fw-bold m-0">TITULO</p>
</div>
</div>
<div class="circulo"> <!-- HIJO -->
<h2>HIJO</h2>
</div>
</div>
</div>
When I click on the card, the function switchColor
changes the background color of it:
let estadoColor;
function switchColor(el) {
if (estadoColor) {
el.style.backgroundColor = estadoColor;
estadoColor = null;
} else {
estadoColor = el.style.backgroundColor;
el.style.backgroundColor = '#e35d6a';
}
}
.drop__card {
background-color: #fff;
}
.circulo {
width: 30px;
height: 30px;
border-radius: 50%;
background: #cecece;
display: flex;
justify-content: center;
padding: 8px;
}
.circulo>h2 {
font-family: sans-serif;
color: black;
font-size: 12px;
font-weight: bold;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container my-5">
<div class="m-2 ui-sortable-handle">
<div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2" onclick="switchColor(this);">
<div class="drop__data">
<div>
<p class="fw-bold m-0">VIERNES</p>
</div>
</div>
<div class="circulo">
<h2>5</h2>
</div>
</div>
</div>
<div class="m-2 ui-sortable-handle">
<div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2" onclick="switchColor(this);">
<div class="drop__data">
<div>
<p class="fw-bold m-0">SABADO</p>
</div>
</div>
<div class="circulo">
<h2>6</h2>
</div>
</div>
</div>
<div class="m-2 ui-sortable-handle">
<div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2" onclick="switchColor(this);">
<div class="drop__data">
<div>
<p class="fw-bold m-0">DOMINGO</p>
</div>
</div>
<div class="circulo">
<h2>7</h2>
</div>
</div>
</div>
</div>
What I need is to apply this function only to the child, that is, the class.circulo
If I change the position of the onclick inside the child element, it works.
<div class="m-2">
<div class="drop__card"> <!-- PADRE -->
<div class="drop__data">
<div>
<p class="fw-bold m-0">TITULO</p>
</div>
</div>
<div class="circulo" onclick="switchColor(this);"> <!-- HIJO -->
<h2>HIJO</h2>
</div>
</div>
</div>
But I need it to work by clicking from the parent, which for size and convenience would be the first to click.
You have to look for the circle class inside the parent