JAVASCRIPT html on click

pytanie zadane 13 lutego 2016 w JavaScript przez uRTLy Bywalec (2,420 p.)
edycja 13 lutego 2016 przez uRTLy

pomoze ktos i wskaze blad i pomoze usprawnic, poprawic? chce na srodku miec slider albo zdjec albo zmieniajacych sie divów z moim wystylizowanym tekstem. Nie dziala mi ten skrypt na slider po kliknieciu.W tych divach sa strzalki z fontello . Chcialbym zeby po kliknieciu w lewa strzalke numer -- czyli dawalo wczesniejsze, po kliknieciu strzalki w prawo zmienna numer ++ czyli nastepna fotka. a przy 4 zdjeciu zeby znowu bylo pierwsze a bez zadnej reakcji czyli else po 4sekundach samo sie zmienialo...
Nawet mi zdjecia z folderu nie pokazuje.

tu sposob wczesniejszy
http://www.wklej.org/id/1943118/

tu terazniejszy

http://www.wklej.org/id/1943690/

i obydwa nie dzialaja.

1 odpowiedź

odpowiedź 13 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
wybrane 13 lutego 2016 przez uRTLy

Najlepsza



<script>


var biezacySlajd = 1;
document.body[0].addEventListener ('load' , zmienaslajd, false)
document.getElementById("stzalkaL").addEventListener ('click', doTylu, false)
document.getElementById("StrzalkaP").addEvenetListener('click', doPrzodu, false)

 function zmienslajd ()
{
 if(biezacySlajd==4) biezacySlajd=1;
var plik="<img src=\"zdjeciaL/photo"+biezacySlajd+".jpg\"/>";
++biezacySlajd;
}

function doTylu  ()
{
 if(biezacySlajd==4) biezacySlajd=1;
var plik="<img src=\"zdjeciaL/photo"+biezacySlajd+".jpg\"/>";
--biezacySlajd;
}

function doPrzodu  ()
{
 if(biezacySlajd==4) biezacySlajd=1;
var plik="<img src=\"zdjeciaL/photo"+biezacySlajd+".jpg\"/>";
++biezacySlajd;
}

Poczytaj trochę o event.Type, jeżeli chcesz tak wywowoływać, by sprawdzało czy dany event jest wykonywany.

</script>

By co jakiś czas wykonywało zmienSlajd wywolujesz po przez rekurencje i setTimeout albo setInterval.

komentarz 13 lutego 2016 przez uRTLy Bywalec (2,420 p.)

super wlasnie tak zaczalem robic po pisaniu tego posta ale nie wiedzialem o click add event.
powiesz mi moze czemu nie pokazuje mi tego cholernego zdjecia w tym divie ? i czy moglem to przerobic tak ?

<script type="text/javascript">

var numer=1;


document.body[0].addEventListener ('load' , zaladuj, false)
document.getElementsByClassName("icon-right-1").addEventListener ('click', strzalkaPrawa, false)
document.getElementsByClassName("icon-left-1").addEventListener('click', strzalkaLewa, false)


function strzalkaPrawa(){
if(numer<4){
numer++;
var plik="<img src=\"photo"+numer+".png\"/>";
document.getElementById("zdjecie").innerHTML= plik;}
else numer==1;
return true;

}
function strzalkaLewa(){
if(numer>1)
{
numer--;
var plik="<img src=\"photo"+numer+".png\"/>";
document.getElementById("zdjecie").innerHTML= plik;
return true;
}
else 
setTimeout("strzalkaPrawa".4000);


}

function zaladuj(){

if((strzalkaPrawa()==false)||(strzalkaLewa()==false))
setTimeout("strzalkaPrawa".4000);


}

</script>

a w tagach od fontello <i> dodac to czy dodac onclick do diva czy wogole teraz nie dodawac? narazie nic mi nie dziala.. nie wyswietla nawet pierwszego zdjecia

<div id="zdjecie"></div>
<div style="clear:both;"></div>
<div id="strzalkaL">
 <i onclick="strzalkaLewa()" class="icon-left-1"> </i> 
</div>
<div id="strzalkaR">

<i onclick="strzalkaPrawa()" class="icon-right-1"></i> 
</div>

komentarz 13 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Zobacz co wywołuje console.log(plik)., podepnij tam gdzie masz else, else if (plus warunek wykonania).

NIE PODPINAJ ZDARZENIA INLINE w HTML już masz podpięte zdarzenie addEventListenrze, teraz tylko musisz zaincludować plik (jeśli skrypt jest poza dokumentem HTML)

komentarz 13 lutego 2016 przez uRTLy Bywalec (2,420 p.)

jesteś mistrzem ! :) pokazalo zdjecie ale strzalki nie dzialaja, sa przysloniete a w konsoli widnieje Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

czyli nie mogłem zrobic addeventlistener do getElementsByClassName :C?

komentarz 13 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Na to wygląda, daj im id :) i po przez document.getElementById etc. ClassName używa się jak modyfikuje klasę, tak tylko strzelam. Za chwilę zaglądne na MDN i się dowiem :).

https://developer.mozilla.org/en-US/docs/Web/API/Element/className

EDIT: Sprawdzasz np: klasy obiektu.

komentarz 13 lutego 2016 przez uRTLy Bywalec (2,420 p.)

zrobiłem juz wczesniej jednak ID ale mam problem z document.getElementById("strzalkaL").addEventListener('click', strzalkaLewa, false);

Uncaught TypeError: Cannot read property 'addEventListener' of null

nie rozumiem w syntaxie dobrze i przeciez nie jest null..

komentarz 13 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

usuń średnik. to jest tylko definowanie nie instrukcja i odpal wtedy.

komentarz 13 lutego 2016 przez Comandeer Guru (602,330 p.)

Nie istnieje element o tym id, stąd ten błąd.

komentarz 13 lutego 2016 przez uRTLy Bywalec (2,420 p.)
edycja 13 lutego 2016 przez uRTLy

wciąz i dziwne ze mimo nadania onload w javie tagowi body jak usune go z htmla to nie wczytuje zdjecia.

dodalem oprocz js eventlistenera to jeszcze onclick w htmlu i dziala....tak samo onload. wszystkie slajdy ida ladnie tylko mi nie wraca do poczatku ale to juz maly problem..

wczesniej nie dzialalo a skrypt byl w srodku <head> .

id nawet przepisywalem od nowa i nie dzialalo :D

komentarz 13 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Uchwyc tag body

komentarz 13 lutego 2016 przez Comandeer Guru (602,330 p.)

Bo wypada znać DOM. Nie da się operować na elemencie, który jeszcze nie został stworzony. Dlatego skrypty umieszcza się na końcu body i odseparowuje od HTML-a

komentarz 13 lutego 2016 przez uRTLy Bywalec (2,420 p.)

no przeciez jasne ze czyta z gory na dol linijki !! dziekuje za cierpliwosc heh....

komentarz 13 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Można nadać atrybut defer?

komentarz 13 lutego 2016 przez Comandeer Guru (602,330 p.)

ShiroUmizake kombinujesz ;) przeniesienie skryptu na koniec body problem rozwiązuje. Poza tym [defer] jest tylko dla skryptów zewnętrznych.

uRTLy ale masz w head i odpalasz od razu; stąd nie działa Ci addEventListener.

komentarz 13 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Tak z ciekawości, czy wpływa to na czas ładowania, jeżeli nie użyje defer a po prostu wrzucę na koniec body?

komentarz 13 lutego 2016 przez Comandeer Guru (602,330 p.)

Powinien skrypt odpalić się wcześniej, bo przerzucenie go na koniec body spełnia tę samą funkcję, co defer (nie do końca, ale w 90% przypadków ta różnica nie ma znaczenia).

komentarz 13 lutego 2016 przez uRTLy Bywalec (2,420 p.)

jeszcze jedno pytanko. musze wiedziec czy EventListener przyjmuje wartosc true lub false ?

bo nie wiem jak wlaczyc przewijanie obrazow w prawo jezeli jest nie klikniete po np 6 sekundach od zaladowania strony i resetowanie czasu po kliknieciu ktorejkolwiek strzalki..

komentarz 13 lutego 2016 przez Comandeer Guru (602,330 p.)

jeszcze jedno pytanko. musze wiedziec czy EventListener przyjmuje wartosc true lub false ?

Nie rozumiem pytania.

komentarz 13 lutego 2016 przez uRTLy Bywalec (2,420 p.)

jak klikne np na te strzalke to czy eventListener przyjmuje wartosc true ze zostala kliknieta a jak ani raz nie klikne strzalki to czy ten

document.getElementById("strzalkaR").addEventListener('click', strzalkaPrawa, false)

bedzie miał wartosc false ?

wg W3 jest jakis use capture .Chodzi mi o cos jak <label> w checkboxie.

useCapture Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

Possible values:

true - The event handler is executed in the capturing phase

false- Default. The event handler is executed in the bubbling phase

komentarz 13 lutego 2016 przez Comandeer Guru (602,330 p.)

Nie ma czegoś takiego. Możesz sobie ustawić jakąś zmienną, którą zmienisz w listenerze.

A "use capture" to sposób propagacji zdarzenia w drzewku DOM – całkowicie inna sprawa.