Functie starten met een toets

[Sjoerd]

Ik heb een image viewer waarvan je hier een demo ziet:

www.w3schools.com/howto/howto_js_slideshow.asp

Klik op 'Try it Yourself' en je ziet een demo met de volledige code.

Wat hier niet werkt, en wat ik er aan toe zou willen voegen, is dat je naar
de volgende/vorige foto kunt gaan met de pijltoets rechts/links.

Naar de volgende foto ga je door op de pijl rechts binnenin de foto te
klikken. Dat is deze code:

<a class="next" onclick="plusSlides(1)">&#10095;</a>

'class="next"' heeft alleen maar te maken met de positie van de pijl.
&#10095; is het teken '❯'.
Door erop te klikken wordt de functie 'plusslides(1)' gestart, die je
verderop in de code ziet staan.

Is het mogelijk om die functie ook met de pijltoets naar rechts te starten?
Hoe dat in zijn werk zou gaan, is op het internet maar lastig te vinden.

[unknown]

Post by Sjoerd
Is het mogelijk om die functie ook met de pijltoets naar rechts te starten?
Hoe dat in zijn werk zou gaan, is op het internet maar lastig te vinden.

Zoiets:

document.body.addEventListener('keyup', function(ev) {
if (ev.key === 'ArrowRight') {
plusSlides(1);
}
});

Documentatie:
- addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
- `keyup` event: https://developer.mozilla.org/en-US/docs/Web/Events/keyup

[Sjoerd]

Post by unknown

Post by Sjoerd
Is het mogelijk om die functie ook met de pijltoets naar rechts te starten?
Hoe dat in zijn werk zou gaan, is op het internet maar lastig te vinden.

document.body.addEventListener('keyup', function(ev) {
if (ev.key === 'ArrowRight') {
plusSlides(1);
}
});

Het werkt zowaar, mijn dank is groot. De code blijkt nog een stuk eenvoudiger
dan gedacht.

Ik heb die code ook uitgeprobeerd in dat w3schools-voorbeeld:
www.w3schools.com/howto/howto_js_slideshow.asp
en dan op 'Try it Yourself' klikken, dan links onderin tussen <script> en
</script> de code toevoegen, samen met de variant voor 'vorige foto' met de
pijltoets naar links:

document.body.addEventListener('keyup', function(ev) {
if (ev.key === 'ArrowRight') {
plusSlides(1);
}
});
document.body.addEventListener('keyup', function(ev) {
if (ev.key === 'ArrowLeft') {
plusSlides(-1);
}
});

Als je dan op 'Run' klikt (de groene knop), dan werkt het niet direct; je
moet eerst eenmaal op één van die pijlen geklikt hebben.
Wat ik mij afvraag: staat de code hier dan niet op de goede plaats?


Op mijn site werkt het wel direct. Ik heb de code in de bestaande .js-file
toegevoegd, en onderin de pagina met de viewer wordt hier naar gelinkt:

<script src="js/viewer.js"></script>

Post by unknown
- addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
- `keyup` event: https://developer.mozilla.org/en-US/docs/Web/Events/keyup

Ik zal hier nog een studie van maken.

[unknown]

Post by Sjoerd
www.w3schools.com/howto/howto_js_slideshow.asp
en dan op 'Try it Yourself' klikken, dan links onderin tussen <script> en
</script> de code toevoegen, samen met de variant voor 'vorige foto' met de
document.body.addEventListener('keyup', function(ev) {
if (ev.key === 'ArrowRight') {
plusSlides(1);
}
});
document.body.addEventListener('keyup', function(ev) {
if (ev.key === 'ArrowLeft') {
plusSlides(-1);
}
});

Je kunt ze ook combineren, scheelt weer een event handler:

document.body.addEventListener('keyup', function(ev) {
if (ev.key === 'ArrowRight') {
plusSlides(1);
} else if (ev.key === 'ArrowLeft') {
plusSlides(-1);
}
});

Post by Sjoerd
Als je dan op 'Run' klikt (de groene knop), dan werkt het niet direct; je
moet eerst eenmaal op één van die pijlen geklikt hebben.
Wat ik mij afvraag: staat de code hier dan niet op de goede plaats?

Ik heb geen idee hoe die "Try it yourself" van w3schools geïmplementeerd
is, dus daar durf ik niks over te zetten.

Post by Sjoerd
Op mijn site werkt het wel direct.

En daar gaat het uiteindelijk om, toch? ;)