Quiero cuando hago clic en una frase o en un botón aparece una imagen y cuando hago clic de nuevo desaparece. pero mi código no parece funcionar usando JS y HTML.
let pic = document.getElementById("hiddenclickimg"); let word = document.getElementById("hiddenclick"); function showPic(){ pic.hidden = 'false' ; word.style.color = 'red'; word.style.backgroundColor = 'blue'; } word.onclick = showPic; <h3 id="Work">Work Experience</h3> <div class="work"> <ul> <li> <img src="./Images/Alex Sydney.jpg" alt="alex sydney" id="hiddenclickimg" hidden="true" /> <button id="hiddenclick">Alex Sydney Hospital</button> </li> </ul> </div> <script src="./main.js"></script>Puede usar el clic de un botón y alternar una clase que oculta la imagen cuando tiene esa clase.
HTML:
<button onclick="imageClick()">Toggle Image</button>CSS:
.hidden { opacity: 0; }JavaScript:
const image = document.getElementById('hiddenclickimg'); const imageClick = () => { image.classList.toggle('hidden'); }Hay diferentes propiedades de CSS que podría usar para ocultar la imagen, pero la opacidad es una buena básica.
No necesita configurar 2 ID para hacer el truco usando la propiedad css display none .
Por ejemplo, desea ocultar esa imagen:
<img id="dog_image" src="dog.png" alt="Rex the Labradoodle" > function hideDog() { const dog = document.getElementById("dog_image"); if (dog.style.display === "none") { dog.style.display = "block"; } else { dog.style.display = "none"; } }Y luego simplemente configure el botón:
<button onclick="hideDog()">Hide/Show my dog</button>puede usar la bandera para cambiar el estado de la imagen como sigue
let imagehidden =false let pic = document.getElementById('hiddenclickimg'); let word = document.getElementById('hiddenclick'); function showPic(){ if(imagehidden){ pic.hidden = false ; word.style.color = 'red'; word.style.backgroundColor = 'blue'; imagehidden=false } else{ pic.hidden =true; imagehidden=true } }