Zmiana tekstu po kliknięciu klawisza

Question

Witam serdecznie

Na swojej stronie chce umieścić diva, który w sobie będzie posiadał tekst. Ów tekst ma się zmieniać po kliknięciu klawisza na klawiaturze np. strzałki w prawo. 

To co mam aktualnie w 90% spełnia moje wymogi, lecz w tym skrypcie jest ustawiony jedynie interwał co 3s, a bardzo zależy mi, aby tekst, który będzie się wyświetlał użytkownikowi... mógł po prostu przeczytać każdy, i gdy skończy wcisnąć klawisz na klawiaturze. 

Mój aktualny sposób: 
 

<script>
	var ilosc = 8
	var teksty = new Array;

	teksty[0] = "tekst1";
	teksty[1] = "tekst2";
	teksty[2] = "tekst3";
	teksty[3] = "tekst4";

	var numer = 0;
	function SelectText()
	{
		numer++;
		if(numer==ilosc) numer=0;
		document.getElementById('dynamic_text').innerHTML = teksty[numer];
	}
	setInterval('SelectText()',3000);
</script>

Pozdrawiam serdecznie

Answer 1

addEventListener

Robisz nasłuchiwanie zdarzeń na oknie, dokumencie czy danym elemencie, a jako typ ustawiasz

keydown

W listenerze tworzysz funkcję anonimową, która będzie sprawdzała jaki klawisz został wciśnięty i wywoływała daną funkcje.

Answer 2

Musisz podpiąć nasłuchiwanie na jakieś konkretne zdarzenie wykonane na stronie: addEventListener  i przy użyciu np zdarzenia keyup (z pomocą jego właściwości) sprawdzić, czy ten konkretny klawisz został wciśnięty, a dalej już co tam chcesz żeby się działo ;)

Answer 3

Wiem, że to wyręczanie się.. lecz jestem zielony z JS i nie wiem gdzie zaimplementować "addEventListener". Czy ma być to w miejscu wcześniejszego: 

setInterval('SelectText()',3000);

I czy obiekt, w którym jest tekst, czyli u mnie div id="dynamic_text". Czy musi posiadać zdarzenie typu onkeyup lub onkeydown. Nie wiem jak się do tego zabrać.

Comments

Tak, podmieniasz ten Interval, bo chyba nie chcesz, żeby funkcja wywoływała się po czasie, a po kliknięciu klawisza. Do tego trzeba zrobić nasłuchiwanie zdarzeń, czyli wcześniej wspomniany addEventListener.

Dam ci przykład, odpal sobie konsolę w dev toolsach (F12), i wklej tam ten kod:

window.addEventListener('keydown', function (e) { console.log('wciśnięty klawisz to: ' + e.keyCode); });

od kliknij na okno i naciśnij coś, w konsoli wypisze ci kod klawisza. Później tylko robisz sprawdzanie jaki klawisz został wciśnięty (czyli porównujesz e.keyCode == 39 (dla strzałki w prawo w tym wypadku) i wykonujesz dalszą część kodu

---

Ohh muszę pana poprosić o wpisanie tego poprawnego kodu, gdyż ja wymiękam. A nie mam tyle czasu aby się douczyć. Wiem, że to pewnie jedna.. dwie linijki i robię głupi błąd.. ale po prostu opadają mi ręce, a bardzo zależy mi na zaimplementowaniu tego jeszcze dzisiaj. 

Będę ogromnie wdzięczny za pomoc.

---

@thryndl,

Dodałem 
 

addEventListener('keydown', function('SelectText()', e.target == 32 );

Lecz nie działa.. i trudno się nie dziwić, gdyż pewnie to nawet nie ma prawa zadziałać.

---

Zgadza się. To nie ma prawda zadziałać...

Tu masz poprawiony kod, przeanalizuj sobie go

var ilosc = 8;
                var teksty = new Array;

                teksty[0] = "tekst1";
                teksty[1] = "tekst2";
                teksty[2] = "tekst3";
                teksty[3] = "tekst4";

                var numer = 0;

                function SelectText() {
                    numer++;
                    if (numer == ilosc) numer = 0;
                    document.getElementById('dynamic_text').innerHTML = teksty[numer];
                }

                window.addEventListener('keydown', function(e) {
                    if (e.keyCode == 39) return SelectText();
                })

Nasłuchiwanie masz na klawisz strzałki w prawo.

---

Bardzo panu dziękuje.. wszystko działa. Teraz czas poświęcić wiele godzin nauce js.. 

Pozdrawiam.