SITUACION: cuando clickeo uno, se alteran los dos..
Lo que busco es que al clickear uno se altere solo su opacidad al 100% y viceversa. y que al clickear de nuevo también disminuya dicha opacidad al 50%
HTML:
<div class="opcionContacto">
<img onclick="opacidad()" id="mailWay" class="contactWay" src="/recursos/correos-electronicos.png" alt="">
<img onclick="opacidad()" id="phoneWay" class="contactWay" src="/recursos/smartphone.png" alt="">
</div>
CSS:
/*$ antes de clickear */
.contactWay{
width: 7%;
opacity: 50%;
margin: 3px;
}
/*$ despeues de clickear */
.contactWayClick{opacity: 100%;}
JavaScript:
const clicki = document.querySelectorAll(".contactWay");
const mailId = clicki[0].getAttribute('id');
const phoneId = clicki[1].getAttribute('id');
function opacidad() {
if (mailId === "mailWay") {clicki[0].classList.toggle("contactWayClick");}
if (phoneId === "phoneWay") {clicki[1].classList.toggle("contactWayClick");}
}