Boton clickable, que muestra y oculta un div.
Tue Nov 16 2021 19:54:24 GMT+0000 (UTC)
Saved by
@samn
#javascript
#css
#html
// HTML
<div id="box">
<div id="item1">CLICK <br> item1</div>
<div id="item2" class="none">item2</div>
</div>
// CSS
#box{
background-color: rebeccapurple;
width:300px;
height: 600px;
}
#item1{
position: absolute;
right: 20px;
background-color: red;
width:100px;
height: 300px;
cursor: pointer;
}
#item2{
position: absolute;
right: 140px;
background-color: yellowgreen;
width:150px;
height: 300px;
}
.block{
display: block;
} //se separa en class diferentes las opciones puntuales que cambiaran dinamicamente.
.none{
display: none;
}
// JavaScript
let item1 = document.getElementById("item1");
let item2= document.getElementById('item2');
let boton=document.getElementById("item1");
let contador=0;
item1.addEventListener("click",boton.onclick);
boton.onclick=function(){ // al agregar onclick capturamos los clicks
contador++;
if (contador%2==0){ // modulo que distingue impar de par
document.getElementById("item2").classList.add("none");
}else{
document.getElementById("item2").classList.remove("none");
document.getElementById("item2").classList.add("block");
}
};
content_copyCOPY
en el link agregado se encontró la idea para el contador de clicks.
https://tpec05.blogspot.com/2019/05/contador-de-clicks-operaciones-y.html
Comments