Change image onclick-events

Question

How do I implement a button on-click event with loading different images?

I want to show different images in one div-container. If I click on the button "changeImage" it should change the picture.

How can I implement this in dart language?

Update: A new image should be loaded by each click. The images are in one file.

Do I call the img with a Button like this?

    <input type="button" value="button" ng-click="img">

Answer 1

depending on the answer to my comment above there are different ways to do it.

(not tested)

import 'dart:async';

const NUM_IMAGES = 4;

main() {
  int curImg = 1;

  (querySelectorAll('img') as HtmlElement).forEach((img) {
    img.onClick.listen((e) {
    (querySelector('#img_${curImg % 4}') as HtmlElement).classes.add('hidden');
    curImg++;
    (querySelector('#img_${curImg % 4}') as HtmlElement).classes.remove('hidden');
  });
}

.

<style>
 img.hidden {
   display: none;
 }
</style>
<img id="img_1" src="a.gif" >
<img id="img_2" src="b.gif" class="hidden">
<img id="img_3" src="c.gif" class="hidden">
<img id="img_4" src="d.gif" class="hidden">

---

alternative solution:

List<String> uris = ['/img/img_a.gif', '/img/img_b.gif', '/img/img_c.gif', '/img/img_d.gif'];

main() {
  int curImg = 0;
  (imgElement = querySelector('img') as ImageElement).onClick.listen((img) {
    curImg++;
    imgElement.src = uris[curImg];
  });
}

.

<img>