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>