How can I change picture on opening & closing details/summary?

Question

This is my first JavaScript ever. It took lots of time but can't get it to work.

Obviously, what it should do is changing the picture when the 'details/summary' part is opened. FYI it's a follow-up from this problem that I'm trying to solve. Anyone see what I'm doing wrong?

<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>

When your script executes, the DOM in your page is still not ready. Put the script tag before the closing `
` tag and try again... Also, take a look at https://stackoverflow.com/questions/807878/how-to-make-javascript-execute-after-page-load — Jordi Nebot, Jan 19 '22 at 19:30
@JordiNebot I tried that (also before posting this topic but then again) but doesn't work either. Edit: thanks for the link however, i added to my favs:-) — Stefanovici, Jan 19 '22 at 19:33
That's one problem but there are others... e.g. `details` is not defined in your script. Try `document.getElementsByTagName("details")[0].addEventListener(...` instead — Jordi Nebot, Jan 19 '22 at 19:35
You'll want to get in the habit of having your browser console open as you work on JavaScript. Here it's fairly apparent what's wrong. See the snippet demo I added above. — isherwood, Jan 19 '22 at 19:40

score 1 · Accepted Answer · answered Jan 19 '22 at 19:43

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>

score 1 · Answer 2 · answered Jan 19 '22 at 19:58

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'>

How can I change picture on opening & closing details/summary?

2 Answers2