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

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>

CodePudding user response：

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>

CodePudding user response：

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  src='https://via.placeholder.com/50'>