Klikanie na diva zmiana kolorów

pytanie zadane 2 marca 2016 w JavaScript przez daniel89 Użytkownik (700 p.)

Jak wykonać podmianę kolorów klikając na diva? W sposób, taki że ładuje się domyślny kolor biały, jak kliknę na diva to zmienia kolor np.na czarny , a jak kliknę jeszcze raz to z powrotem na biały?

Na razie mam tyle zrobione ale chyba ten onclick to nie bardzo się nadaje , chyba że się mylę , proszę o pomoc z tym . Kod dotychczasowy:

function ta()
{
var element = document.getElementById('abc');
 
element.style.color = 'black';

if (element.style.color == 'black'&& ......?) /* Tutaj problem */
{
element.style.color = 'white';
}
}
  
<div class="sw" id="abc" onclick="ta()" style="bottom:617px; left:125px;"><i class="flaticon-eee"></i>1</div>

2 odpowiedzi

odpowiedź 2 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 2 marca 2016 przez daniel89

Najlepsza

https://jsfiddle.net/Chriss92/015ykyn3/

Tylko nie wiem jak to zrobić bez użycia !important w CSS.

komentarz 2 marca 2016 przez Czort Nałogowiec (32,500 p.)

Jak usuniesz background z #abc, to działa bez !important :)

komentarz 2 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Wiem (domyślnie tło jest białe), tylko że jeśli miałyby być kolory tła np. zielony i czerwony, to jak wtedy to zapisać bez !important?

komentarz 2 marca 2016 przez daniel89 Użytkownik (700 p.)

Nie działa mi to tak jak chciałem . Zmieniłem z background na color bo mi chodziło o kolor ikonki i jak klikam na ikonkę to mi zmienia kolor ale jak na diva w której jest ikonka to już nie zmienia. Dodawałem id="abc" i do diva głównego i do tego w którym jest ikonka . Jak to naprawić ?

komentarz 2 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż kod :)

komentarz 2 marca 2016 przez daniel89 Użytkownik (700 p.)

// HTML
<div id="abc" class="sw"  style="bottom:617px; left:125px;">
<i id="abc" class="flaticon-eee"></i></div>



//JS
(function (docu)
{
docu.addEventListener('click', function(eve)
{
if (eve.target.id === 'abc')
eve.target.classList.toggle('black');
},false)

}(document));



//CSS
.black
{
	color: black !important;
}
#abc
{
	color: white;
}

komentarz 2 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

 to tag kursywy. Nie pomyliło Ci się z <img>?

komentarz 2 marca 2016 przez Czort Nałogowiec (32,500 p.)

id nie może się powtarzać w całym dokumencie html.

komentarz 2 marca 2016 przez daniel89 Użytkownik (700 p.)

albo się używa dodając ikonki z fontello więc nie pomyliło mi się . przecież dodałem <link rel="stylesheet" href="fontello/css/fontello.css" type="text/css"/> . Typ jest text więc czy pasuje i działa zresztą tak jest w nocie i pan M.Z. tak robił .

Gdy usunąłem z css #abc . to mi teraz działa tak jak chciałem i nawet !important nie trzeba używać .

Co do id że nie może się powtarzać to ja wiem. Każdy div ma swoje id . Tylko jak w divie siedzie ikonka z tagiem to jak nie dodam w niej wewnątrz "id" to mi nie działa na niej klikanie . Teraz działa.

Co do tej funkcji z JS-a jak bym chciał dodać jeszcze jakieś zdarzenie to pod tym ifem tak? " if (eve.target.id === 'abc') "

I jeszcze coś nie wiem , jak dodam jakieś zdarzenie tam to np. chcę włączyć lub wyłączyć jakieś dane przesyłane przez usb to będzie to działać ? Chodzi o przesłanie przez kliknięcie stanu wysokiego (1) a po ponownym kliknięciu (0) . Da się to w tym zrobić czy do tego trzeba coś innego ?

komentarz 2 marca 2016 przez daniel89 Użytkownik (700 p.)

To jak w końcu może ikonka wewnątrz diva mieć takie samo id jak cały div czy każdej z osobna oddzielne id trzeba zrobić ?

Chodzi o ten kod html :

<div id="abc" class="sw"  style="bottom:617px; left:125px;">
<i id="abc" class="flaticon-eee"></i></div>

czy ten tag musi mieć inne id od tego głównego ?

komentarz 2 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

ID najlepiej, aby było jedno na element. Ostatnio było pytanie o ID vs Klasa w HTML/CSS i Comandeer wyjaśniał:

http://forum.pasja-informatyki.pl/109776/html-class-czy-id?show=109776#q109776

komentarz 2 marca 2016 przez daniel89 Użytkownik (700 p.)

No przeczytałem . Klasę do stylizowania , a id do łapania diva i potem działania w JS . ID jedno na element .. mhm .. tylko skoro w divie jest drugi div a on nie dziedziczy z ojca tego ID to wtedy mnie to irytuje . Chcę sobie kliknąć w ikonkę , to powinno sie dać przypisać tą ikonkę do tego ID. Pewnie jest jakaś metoda na to ale nie znam jej .Z resztą mało znam :/. Myślałem z początku że można łatwiej coś zrobić, a tu się okazuje że są inne metody nie onclick tylko addEventList. . Pewnie i na to ID coś jest. A co do wcześniejszego pytania odpowiesz mi?

komentarz 2 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Nie tylko po ID możesz łapać. Są jeszcze querySelectorAll() oraz querySelector(). Występują bodajże w wariantach document.query<...> oraz element.query<...>

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

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

komentarz 2 marca 2016 przez daniel89 Użytkownik (700 p.)

Nadal nie mam pojęcia jak prawidłowo przypisać ikonkę do ID . Tym querySelector() można to zrobić?

komentarz 2 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Przykładowo tak:

https://jsfiddle.net/Chriss92/015ykyn3/2/

Możesz nadać inne ID, możesz nadać jakąś klasę (wtedy document.getElementsByClassname() ), możesz nadać "name" - wtedy querySelector (ale on łapie po id/klasie/atrybutach/zagnieżdżonych elementach). Masz wiele możliwości na uchwycenie elementu.

komentarz 2 marca 2016 przez daniel89 Użytkownik (700 p.)

Nom a jak chwycę przypisując name temu

eve.target.querySelector('div[name = imie]')

to jak to dalej zrobić aby ikonka reagowała tak samo na kliknięcie jak główny div ?

komentarz 2 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli ma zareagować tak samo, jak główny DIV, to po prostu napisz to samo co napisałeś głównemu DIVowi... chyba logiczne :)? Czy tak nie działa?

komentarz 3 marca 2016 przez daniel89 Użytkownik (700 p.)

Nie wiem o co Ci chodzi z tym napisz tak samo. Podaj przykład tak mi lepiej to zrozumieć.

komentarz 3 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

jak to dalej zrobić aby ikonka reagowała tak samo na kliknięcie jak główny div ?

Ja przez to rozumiem, że masz napisaną reakcje na główny DIV. Więc aby ikonka reagowała tak samo, no to napisz jej te same instrukcje do wykonania. Nie rozumiem, czego tutaj nie rozumiesz :)

komentarz 3 marca 2016 przez daniel89 Użytkownik (700 p.)
edycja 3 marca 2016 przez daniel89

if (eve.target.id === 'abc' || eve.target.name === 'imie'  )

Tak mi nie działa.

Chwyciłem tak:

docu.querySelector('i[name = imie]');

dalej nie działa ? Próbowałem nadać

mimo tego dalej coś mi nie działa.

!!!!!!!!!!!!!!!!!!

Nie no sorry , jak daję to działa, tylko jest problem bo jak klikam w ten div czy tą ikonkę w tym divie często to się przywiesza nie chce reagować po którymś razie .

komentarz 3 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Spróbuj zamiast

eve.target.name === 'imie'

, napisać:

eve.target.getAttribute('name') === true

komentarz 3 marca 2016 przez daniel89 Użytkownik (700 p.)

eve.target.getAttribute('name') === true;

To mi nie działa. Tylo i wyłącznie działa jak dam

 <i id="bcd" class="flaticon-eee"></i>

tylko że to działa na zasadzie zawieszania się w JS . Czyli wychodzi że jak się przypisze ID tagowi to algorytm JS się wiesza . Powinno być aby traktować tag jako część diva głównego . Nie ma czegoś takiego? Lub coś w tym JS zmienić .

komentarz 3 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

A co się wyświetla, gdy wpiszesz console.log(eve.target.getAttribute('name')); ?

komentarz 3 marca 2016 przez daniel89 Użytkownik (700 p.)
edycja 3 marca 2016 przez daniel89

gdzie to mam wpisać? bo jak daję w tej funkcji to nic się nie wyświetla . Może sprawdź u siebie jak możesz .

O to Ci chodziło? : Uncaught SyntaxError: missing ) after argument list menu.js:32

komentarz 3 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Klikaj w napis wewnątrz DIVa i w konsoli pokaże Ci się nazwa tagu:

https://jsfiddle.net/Chriss92/015ykyn3/3/

komentarz 3 marca 2016 przez daniel89 Użytkownik (700 p.)
edycja 3 marca 2016 przez daniel89

Zrobiłem już na ID działa jak trzeba.

Nie wiem czy dobrze to rozumiem ale funkcja function(eve) zwraca eve czyli tylko jedną wartość ,i jak klikałem szybko a załadowały się dwa warunki

eve.target.id === 'abc'  || eve.target.id === 'bcd'

to funkcja się wieszała bo było odwołanie do tej funkcji

eve.target.classList.toggle('black'); w domyśle eve !

. Dlatego zadeklarowałem jak to Ty zrobiłeś w tym menu co mi pomagałeś dwie zmienne chwycone przez document.getElementById i potem podmieniam kolor przez odwołanie do tych zmiennych nie do warunku funkcji czyli eve .

Jeszcze co można by naprawić to spróbować złapać po name przez target.querySelector('i[name = imie]') ... czy jakoś jeszcze inaczej .. spróbuję coś dam znać ..

Jeszcze działa na getAttribute :

eve.target.getAttribute('name') === 'imie' . Pewnie pobiera jako get ' name i sprawdza czy jego atrybuty to jest imie jest zgodne z tym === 'imie' .

komentarz 3 marca 2016 przez daniel89 Użytkownik (700 p.)

Jeszcze jedno mam pytanie . Jak mam ok. 20 takich DIV zmieniających stan przez tą funkcję w JS. to do każdego muszę taką funkcję napisać ? Nie można jednej funkcji i potem podmieniać ID oraz name obrazka ? Wiesz jak to zrobić ?

komentarz 3 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Utwórz klasę (w CSS) i dodaj ją do każdego z tych DIVów. Następnie w EventListener przeleć pętlą po wszystkich elementach klasy i sprawdzaj czy ev.target jest taki sam jak dany element klasy.

komentarz 3 marca 2016 przez daniel89 Użytkownik (700 p.)

jakiś przykład ? nie mam aż tak bogatej wyobraźni dopiero się uczę tym bawić .

komentarz 3 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Przykład: https://jsfiddle.net/Chriss92/015ykyn3/4/

komentarz 3 marca 2016 przez daniel89 Użytkownik (700 p.)

To jest w consloli wykonywanie pokazania kliknięcia DIV-a a nie zmiana stanu DIV-a elementów jak w temacie . Jak to dalej podmienić? Nie wiem czy to jest dobrze

komentarz 3 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Ja nie za bardzo rozumiem co chcesz wykonać.

W poniższym kodzie masz kilka elementów, które są podpięte pod jedną klasę. Po kliknięciu na którykolwiek z nich, zmienia się jego tło (bo dodaję/usuwam na zmianę klasę, która zmienia atrybuty CSS klikniętego elementu).

https://jsfiddle.net/Chriss92/015ykyn3/5/

Po prostu nadajesz X elementom jedną klasę (lub wiele, ale też potem trzeba odpowiednio rozpisać IFy), ją sobie stylizujesz. W JS rozpoznajesz, który element wziął udział w interakcji z użytkownikiem (inaczej mówiąc z którym elementem użytkownik coś zrobił: czy to przez klik, wpisanie czegoś, najechanie myszką, czy może jakaś zewnętrzna funkcja wywołała określone zachowanie) - jeśli elementów jest wiele, to używasz pętli i wykonujesz określone czynności dla tego elementu (lub elementów, bo możesz w pętli sprawdzać czy wiele elementów spośród wszystkich znajdujących się w tablicy zostało zmienionych albo spełnia określony warunek).

Jeśli nie o to Ci chodzi, to może wykonaj kilka rysunków lub pokaż jakiś przykładowy link z tym co chcesz osiągnąć.

komentarz 3 marca 2016 przez daniel89 Użytkownik (700 p.)


for (var i =0, len = klik.length; i< len; i++)
if (ev.target === klik[i])

Możesz mi wytłumaczyć klik.length ? przypisujesz do len . klik to jest metoda którą wystylizowałeś w CSS . length to jej długość ? Czyli co to znaczy długość klik ?

Co do działania to ma właśnie działać na tej zasadzie tylko ma znowu błąd bo jak klikam na obrazek to już nie działa , tylko łapie clasę diva a nie NAME tagu który przypisałem do obrazka

komentarz 4 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

klik - to zmienna, która zawiera kolekcję elementów DOM (zwróconą z metody document.getElementsByClassName('klikalny')), którym nadałeś określoną klasę

W pętli, deklaruje sobie zmienną len, pod którą umieszczam długość elementów, które "objęte są" jedną klasą. Czyli pod zmienną len znajduje się liczba 3, ponieważ są 3 elementy, które mają klasę "klikalny". Czyli: klikalny, to nazwa klasy, a klik to nazwa zmiennej, w której umieszczone są wszystkie elementy klasy o nazwie klikalny; zaś len zawiera długość klasy "klikalny" (są to 3 elementy).

W każdej iteracji pętli sprawdzam, czy któryś z elementów klasy jest tym, który został kliknięty. Jeśli tak, to wykonuje na nim czynność naprzemiennego (z każdym kliknięciem) dodawania/usuwania klasy, która zmienia kolor tła - czyli ev.target.classList.toggle('black');

ma znowu błąd bo jak klikam na obrazek to już nie działa

Jaki błąd się pojawia?

komentarz 4 marca 2016 przez daniel89 Użytkownik (700 p.)

to samo co wcześniej . Klikam na ikonkę obrazka i się przywiesza przy częstym klikaniu. Dodałem for dla .

for (var e =0, lene = name.length; e< lene; e++){
	if (eve.target === name[e] )
	{	
	eve.target.classList.toggle('black');
	}
}
var name = document.getElementsByTagName('i');

komentarz 4 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Czy Ty zadeklarowałeś zmienną name ZA pętlą, w której odwołujesz się do tej zmiennej? Jeśli tak, to jest to błąd. W JS jest coś takiego jak hoisting,

http://code.tutsplus.com/tutorials/javascript-hoisting-explained--net-15092

, w momencie gdy deklarujesz jakąkolwiek zmienną, to jej deklaracja zostanie "uniesiona" na samą górę danego skryptu (jeśli to zmienna globalna) lub funkcji (jeśli to zmienna lokalna), w której zmienna została utworzona. Jeśli inicjalizujesz zmienną poniżej jej deklaracji, to pierwotnie zostanie jej przypisana wartość undefined.

W Twoim przypadku próbujesz się odwołać do zmiennej, którą inicjalizujesz ZA pętlą, zaś w samej pętli się do niej odwołujesz. Przenieś linijkę z tworzeniem zmiennej name przed pętlę (powyżej jej) i wtedy powinno działać.

komentarz 4 marca 2016 przez daniel89 Użytkownik (700 p.)

zadeklarowałem przed pętlą na początku się deklaruje warunki które są używane w funkcji. Nie wkleiłem Ci całego kodu tylko wycinkę pokazującą co gdzie i jak zrobiłem .

Problem jest w tym , że

eve.target.classList.toggle('black');

jest wywoływane w obrazku i w otoczce czyli całym DIV-ie . Może jakby warunki jeszcze jakieś if wewnątrz dopisać gdy kliknąłem na otoczkę a potem klikam na obrazek to coś tam wykonuj aby nie blokować , bo to u mnie wygląda jak by funkcja się blokowała . Coś z tym toggle może zmienić ..

komentarz 4 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Sprawdź czym jest w tym miejscu eve.target. Jeśli nie jest tym czym chcesz, ale jest np. dzieckiem elementu, to napisz eve.target.parentNode (wtedy odwołasz się do rodzica klikniętego elementu). Podobnie możesz napisać eve.target.childNodes, aby odwołać się do dzieci (lub dziecka, jeśli jest jedno) - wtedy na końcu musisz podać numer dziecka klikniętego elementu. Podobnie jak przy getElementsByClassName i getElementsByTagName.

Zmodyfikuj skrypt z JSFiddle, który Ci napisałem w taki sposób, aby pojawił się błąd występujący u Ciebie. Zobaczę co jest źle w Twoim kodzie.

komentarz 4 marca 2016 przez daniel89 Użytkownik (700 p.)

Tutaj masz kod co zrobiłem :

(function (docu)
{
var nam = document.getElementsByTagName('i');
var swiatlo = document.getElementsByClassName('swiatlo');
var liste = document.getElementById('abc0'); // listea = document.querySelector('i[name = imie]');

docu.addEventListener('click', function(eve)
{
//if (eve.target.id === 'abc0'   || eve.target.getAttribute('name') === 'imie0' )
{
//liste.classList.toggle('black');
/*listea.classList.toggle('black');*/
/*eve.target.classList.toggle('black');*/
}
//for (var i =0, len = swiatlo.length; i< len; i++)
for (var i =0; i< 14; i++)
{
	if (eve.target === swiatlo[i]  )
	{
	/*eve.target.classList.toggle('black');*/
	
	eve.target.classList.toggle('black').parentNode;         
	//console.log('Jeden z klasy: ', swiatlo[i], ' ', eve.target);
	}
}
for (var e =0; e< 14; e++)
{
	if ( eve.target.getAttribute('name') === 'imie'+e )
	{
	
	/*eve.target.classList.toggle('black');*/
	eve.target.classList.toggle('black2');      // black2 ma takie same właściwości jak black .
	}}},false)
}(document));

Niestety ale muszę jechać nie mam jak teraz dalej się z tym bawić. Jak znajdziesz chwilę to byś odpalił u siebie i sprawdził byłbym wdzięczny . Dzięki za dotychczasową pomoc .

komentarz 4 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Nie sprawdzę całości, ponieważ nie podałeś kodu HTML. Ale kilka uwag:

Dlaczego masz dwie pętle for wykonujące się tyle samo (14) razy?

for (var i =0; i< 14; i++)

// (...)

for (var e =0; e< 14; e++)

Poniższy zapis jest błędny:

eve.target.classList.toggle('black').parentNode;

Prawidłowo powinieneś umieścić parentNode za .target., czyli:

eve.target.parentNode.classList.toggle('black');

Wtedy dopiero, na rodzicu elementu, który wywołał zdarzenie, wykonujesz toggle.

komentarz 4 marca 2016 przez daniel89 Użytkownik (700 p.)

Jeszcze na chwile wszedłem. Jak dam tak : eve.target.parentNode.classList.toggle('black');

to mi wcale nie działa .

Z HTMLA to są DIV w 13 egzemplarzach dlatego i<14 . Dwie pętle for bo osobno idzie sprawdzenie dla jednych DIV a osobno dla drugich , ale można to później połączyć. Ważne jest to że się to eve.target źle wykonuje . Tzn jak klikam na obrazek to się w miarę przełącza ale jak zjadę myszką i chcę kliknąć na DIV to mi nie łapie .

Kod HTML część do tego , tylko pokazuję Ci 6 sztuk tego czegoś , a jest ich 13 .

<div name="a0"  id="abc0" class="swiatlo"  style="bottom:617px; left:125px;" ><i name="imie0" class="flaticon-eee"></i></div>
					
					<div id="abc1" class="swiatlo" style="bottom:390px; left:105px;"><i name="imie1"  class="flaticon-eee"></i></div>
					
					<div id="abc2" class="swiatlo" style="bottom:255px; left:333px;"><i name="imie2"  class="flaticon-eee"></i></div>
					
					<div id="abc3" class="swiatlo" style="bottom:604px; left:623px;"><i name="imie3"  class="flaticon-eee"></i></div>
					
					<div id="abc4" class="swiatlo" style="bottom:830px; left:690px;"><i name="imie4"  class="flaticon-eee"></i></div>
					
					<div id="abc5" class="swiatlo" style="bottom:560px; left:720px;"><i name="imie5"  class="flaticon-eee"></i></div>

komentarz 4 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

https://jsfiddle.net/Chriss92/015ykyn3/6/

Wg mnie ten kod działa. Zarówno DIV jak i pola  reagują na kliki - zmieniając swoje tła oddzielnie.

komentarz 4 marca 2016 przez daniel89 Użytkownik (700 p.)
edycja 4 marca 2016 przez daniel89

No reaguje i zmienia pola . nie wyrzuca błędu . Tylko zrozum że się przywiesza . Nie jest to doskonałe . Jest jakaś inna funkcja która by zmieniała kliknięciem pole niż eve.target.classList.toggle ? Trzeba to zmienić bo mi się nie podoba przywieszanie tego przy częstym klikaniu . Jak by było tylko jedno pole bez tej ikonki wewnątrz to by działało bardzo dobrze ale z tą ikonką jak jest to x2 wywoływane to jest nie dobre . Wiesz jak to zmienić czy wrzucić na główne forum bo tutaj nikt pewnie nie wejdzie już ?

Chyba problem leży w tym że jak kliknę aktywuj na ikonkę to już wyłączyć polem obok ikonki (tym divem całym) już tego nie mogę . Jaki warunek dać aby można było ?

komentarz 4 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Podajesz kod HTML i JS, ale problem jest w tym że Ty sobie robisz ikonki z użyciem Fontello. Tego już nie zamieszczasz w kodzie, więc nie sprawdzimy czy działa płynnie czy się przywiesza.

Możesz założyć nowy temat, ale podaj w nim kod razem z podpiętym Fontello, aby można było zobaczyć dokładnie jak to działa i Tobie pomóc.

komentarz 4 marca 2016 przez daniel89 Użytkownik (700 p.)

Przypiołem

<link rel="stylesheet" href="fontello/css/fontello.css" type="text/css"/>

Kod Ci przecież podałem . Chcę tylko abyś mi powiedział jak zrobić warunek , że gdy jest aktywne pole z ikonką u Ciebie ten szary kwadracik to jak kliknę na czarne duże pole u Ciebie w tym kodzie to mi tamto pole zmieni . Tutaj można to naprawić jeden warunek tylko mi podpowiedz jaki

komentarz 4 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

https://jsfiddle.net/Chriss92/015ykyn3/7/

W ten sposób? W momencie gdy element mniejszy został kliknięty (klasa wtedy się dodaje/usuwa), to następnie kliknięcie w rodzica (element większy u mnie) usuwa klasę z mniejszego elementu. Poklikaj w różnej kolejności (potestuj) i sprawdź czy o to Ci chodziło.

komentarz 4 marca 2016 przez daniel89 Użytkownik (700 p.)

ale żeś wymyślił normalnie takiego kombosu to jeszcze nie widziałem

Zrobiłeś tak że jak kliknę włącz swiatlo na DIVie to mi zmienia kolor ikonki na ikonce też zmienia kolor ikonki , ale już jak włączę na ikonce to na DIVIE wyłącze za drugim kliknięciem to nawet by fajna było ale nie dla przeciętnego Kowalskiego . Dalej jak włączę na DIVIe to już ikonką nie wyłączę ile razy bym nie klikał .

Cudnie ale za bardzo pokomplikowałeś . Jakoś prościej te warunki , gdzie kolwiek klikam to ma zmieniać kolor ikonki i tyle czy kliknę na DIVA czy na ikonkę . xd

a i można połączyć te pętle for w jedną nie trzeba jednak dwóch na razie jedna wystarczy :P

komentarz 4 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Mógłbyś trochę prościej opisać czego Ci jeszcze trzeba :)?

komentarz 4 marca 2016 przez daniel89 Użytkownik (700 p.)

jasne .

Tak po prostu !

To co mi przesłałeś jest MEGA ale nie dobre .

Spójrz masz tutaj przycisk z ikonką Facebook :

W niej jest ikonka z fontello przypuszczalnie .

Gdy najadę myszką na ikonkę i kilknę myszką to zmieni mi się kolor ikonki na czarny .

Gdy najadę na obramowanie tego przycisku ( nie na ikonkę) i kliknę to mi się zmieni kolor ikonki . Do tej pory tak miałem i było dobrze . Po czym odkryłem , że gdy klikam na ikonkę facebooka ("f" - tylko ta mała literka) i się zmieni kolor na czarny to gdy najadę myszką na obramowanie i chcę kliknąć aby kolor zmienić ikonki gdy ten już był aktywowany na czarny nie mogę .

Dlatego potrzebuję napisać ten algorytm tak abym gdzie kolwiek kliknął w polu tego przycisku to mi zmieni kolor. Chcę aby to wszystko było jednym przyciskiem rozumiesz ?

komentarz 5 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Teraz ok?

https://jsfiddle.net/Chriss92/015ykyn3/8/

komentarz 5 marca 2016 przez daniel89 Użytkownik (700 p.)

Teraz klikanie na ikonke działa , ale razem z nim cała strona , a to tylko miało się tych przycisków chwytać .

Teraz gdzie kolwiek kliknę to mi zmienia kolor nawet tła napisu .

Jasno wytłumaczyłem czego chcę a tutaj coś znowu przekombinowałeś.

komentarz 6 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

To szczerze mówiąc, już nie wiem jak Ci pomóc. Albo Ty źle tłumaczysz, albo ja źle rozumiem.

Pokazałem Ci kilka przykładów. Wzorując się na nich, może już sam sobie dasz radę napisać to tak, jak ma działać.

komentarz 6 marca 2016 przez daniel89 Użytkownik (700 p.)

Działa mi i ma działać na tej zasadzie tylko chciałem uprościć ten kod , zobacz :

(function (docu)
{
var liste0=document.getElementById('abc0'),liste1=document.getElementById('abc1'),liste2=document.getElementById('abc2'),liste3=document.getElementById('abc3'),
	liste4=document.getElementById('abc4'),liste5=document.getElementById('abc5'),liste6=document.getElementById('abc6'),liste7=document.getElementById('abc7'),
	liste8=document.getElementById('abc8'),liste9=document.getElementById('abc9'),liste10=document.getElementById('abc10'),liste11=document.getElementById('abc11'),
	liste12=document.getElementById('abc12'),liste13=document.getElementById('abc13');

docu.addEventListener('click', function(eve)
{
if (eve.target.id === 'abc0' || eve.target.getAttribute('name') === 'imie0')
{liste0.classList.toggle('black');}
if (eve.target.id === 'abc1' || eve.target.getAttribute('name') === 'imie1')
{liste1.classList.toggle('black');}
if (eve.target.id === 'abc2' || eve.target.getAttribute('name') === 'imie2')
{liste2.classList.toggle('black');}
if (eve.target.id === 'abc3' || eve.target.getAttribute('name') === 'imie3')
{liste3.classList.toggle('black');}
if (eve.target.id === 'abc4' || eve.target.getAttribute('name') === 'imie4')
{liste4.classList.toggle('black');}
if (eve.target.id === 'abc5' || eve.target.getAttribute('name') === 'imie5')
{liste5.classList.toggle('black');}
if (eve.target.id === 'abc6' || eve.target.getAttribute('name') === 'imie6')
{liste6.classList.toggle('black');}
if (eve.target.id === 'abc7' || eve.target.getAttribute('name') === 'imie7')
{liste7.classList.toggle('black');}
if (eve.target.id === 'abc8' || eve.target.getAttribute('name') === 'imie8')
{liste8.classList.toggle('black');}
if (eve.target.id === 'abc9' || eve.target.getAttribute('name') === 'imie9')
{liste9.classList.toggle('black');}
if (eve.target.id === 'abc10' || eve.target.getAttribute('name') === 'imie10')
{liste10.classList.toggle('black');}
if (eve.target.id === 'abc11' || eve.target.getAttribute('name') === 'imie11')
{liste11.classList.toggle('black');}
if (eve.target.id === 'abc12' || eve.target.getAttribute('name') === 'imie12')
{liste12.classList.toggle('black');}
if (eve.target.id === 'abc13' || eve.target.getAttribute('name') === 'imie13')
{liste13.classList.toggle('black');}
}
,false)
}(document));

Da się go jakoś uprościć ?

Jeszcze do tego potrzebował bym ,aby gdy kliknę i zmieni kolor to aby przy wczytaniu strony na nowo (odświeżeniu) pamiętało jaki kolor został. Umiesz to zrobić?

komentarz 6 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Można skrócić w ten sposób: https://jsfiddle.net/Chriss92/pa4rktnk/

Ale nie mam w HTML elementu "liste" więc nie działa i nie mam jak sprawdzić dalej.

Jeszcze do tego potrzebował bym ,aby gdy kliknę i zmieni kolor to aby przy wczytaniu strony na nowo (odświeżeniu) pamiętało jaki kolor został. Umiesz to zrobić?

Da się zrobić (np. localStorage). Ale najpierw niech kod działa. Podaj kod HTML brakujących elementów.

[edit]

Czekaj... chyba wszystko jest. Za dużo tych elementów i się zgubiłem :)

komentarz 7 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Proszę, skrócony kod: https://jsfiddle.net/Chriss92/pa4rktnk/1/

W sumie, to ciekawy task dałeś :)

P.S. Tam, w 12 linijce JS, zrób potrójny znak === (przeoczyłem)

return eve.target.id === 'abc' + iterator;

komentarz 7 marca 2016 przez daniel89 Użytkownik (700 p.)

Przecież to nie działa. Klikałeś w ten zielony kwadracik wewnątrz co mi przesłałeś ?

Wgrałem do siebie i nie działa jak trzeba . Działa tylko na ostatnim elemencie nie na wszystkich.

komentarz 7 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Teraz lepiej? https://jsfiddle.net/Chriss92/pa4rktnk/3/

komentarz 7 marca 2016 przez daniel89 Użytkownik (700 p.)

Prawie dobrze. Chyba Ci nie powiedziałem, ale class name = swiatlo jest dla pierwszych 6 id. a class name = gnd jest dla kolejnych 8 elementów . Trzeba by inaczej to podłapać i by było już na ukończeniu to zadanie .

Zobacz:

<div name="a0"  id="abc0" class="swiatlo"  style="bottom:617px; left:125px;" ><i name="imie0" class="flaticon-eee"></i></div>
					
					<div id="abc1" class="swiatlo" style="bottom:390px; left:105px;"><i name="imie1"  class="flaticon-eee"></i></div>
					
					<div id="abc2" class="swiatlo" style="bottom:255px; left:333px;"><i name="imie2"  class="flaticon-eee"></i></div>
					
					<div id="abc3" class="swiatlo" style="bottom:604px; left:623px;"><i name="imie3"  class="flaticon-eee"></i></div>
					
					<div id="abc4" class="swiatlo" style="bottom:830px; left:690px;"><i name="imie4"  class="flaticon-eee"></i></div>
					
					<div id="abc5" class="swiatlo" style="bottom:560px; left:720px;"><i name="imie5"  class="flaticon-eee"></i></div>
																						
		
		
					<div id="abc6" class="gnd" style="bottom:1123px; left:220px;"><i name="imie6"class="flaticon-ttt"></i></div>
					 
					<div id="abc7" class="gnd" style="bottom:1061px; left:100px;"><i name="imie7"class="flaticon-ttt"></i></div>
					
					<div id="abc8" class="gnd" style="bottom:1040px; left:218px;";><i name="imie8"class="flaticon-ttt"></i></div>
					
					<div id="abc9" class="gnd" style="bottom:988px; left:215px;";><i name="imie9"class="flaticon-ttt"></i></div>
					
			<div id= "abc10" class="gnd" style="bottom:1422px; left:450px;"><i name="imie10"class="flaticon-ttt"></i></div>
					
			<div id="abc11" class="gnd" style="bottom:1203px; left:950px;"><i name="imie11"  class="flaticon-ttt"></i></div>
					
			<div id="abc12" class="gnd" style="bottom:1004px; left:620px;"><i name="imie12" class="flaticon-ttt"></i></div>
					
			<div id="abc13" class="gnd" style="bottom:1256px; left:945px;"><i name="imie13" class="flaticon-ttt"></i></div>

komentarz 7 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

To spróbuj sobie zmodyfikować mój skrypt pod siebie. Jak coś nie wiesz, to pytaj.

odpowiedź 2 marca 2016 przez Rubeus024 Obywatel (1,680 p.)

Zobacz, czy o to Tobie chodziło:

<script>
function ta()
{
var element = document.getElementById('abc');
  if(element.style.color != 'black') {
element.style.color = 'black';
 }
if (element.style.color = 'black')
{
element.style.color = 'white';
}
}
   </script>
<div class="sw" id="abc" onclick="ta()" style="bottom:617px; left:125px;"><i class="flaticon-eee"></i>1</div>