Este es mi primer JavaScript. Tomó mucho tiempo pero no puedo hacerlo funcionar.
Obviamente, lo que debería hacer es cambiar la imagen cuando se abre la parte 'detalles/resumen'. FYI es un seguimiento de este problema que estoy tratando de resolver. ¿Alguien ve lo que estoy haciendo mal?
<body> <script type="text/javascript"> function changeImage(a) { document.getElementById("img").src = a; } details.addEventListener("toggle", event => { if (details.open) { changeImage("https://via.placeholder.com/50/ff0000"); } else { changeImage("https://via.placeholder.com/50/0000ff"); } }); </script> <details> <summary> <table> <td width="64">#910</td> </table> </summary> <table> <td width="64">#910</td> </table> </details> <img id="img" src='https://via.placeholder.com/50'> </body>Esa es la parte que falta: const details = document.querySelector('details') . Entonces funcionaría.
function changeImage(a) { document.getElementById("img").src = a; } const details = document.querySelector('details') details.addEventListener("toggle", event => { if (details.open) { changeImage("https://via.placeholder.com/50/ff0000"); } else { changeImage("https://via.placeholder.com/50/0000ff"); } }); <body> <script type="text/javascript"> </script> <details> <summary> <table> <td width="64">#910</td> </table> </summary> <table> <td width="64">#910</td> </table> </details> <img id="img" src='https://via.placeholder.com/50'> </body>Utilice event.currentTarget; , apunta a la etiqueta que está escuchando el evento. Ese evento es un simple 'clic', nunca leí que 'alternar' era un evento, aprendí algo hoy.
const changeImage = event => { const clicked = event.currentTarget; const img = document.querySelector('.img'); if (clicked.matches('details')) { if (clicked.open) { img.src = "https://via.placeholder.com/50/ff0000"; } else { img.src = "https://via.placeholder.com/50/0000ff"; } } } document.querySelector('details').addEventListener('click', changeImage) <details> <summary> <table> <td width="64">#910</td> </table> </summary> <table> <td width="64">#910</td> </table> </details> <img class="img" src='https://via.placeholder.com/50'>