How can I change picture on opening & closing details/summary?
Solution 1:
That is your missing part: const details = document.querySelector('details'). Then it would work.
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>Solution 2:
Use event.currentTarget;, it points to the tag that is listeneing for the event. That event is a simple 'click', never read that 'toggle' was an event, I learned something today.
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'>