Kod js tworzący przycisk nie działa

Question

Mam problem z kodem który odpowiada za przełączanie przycisku nie wiem dlaczego nie działa. Są dwa divy 1-class="switch" 2-class="kolo" dodałem bibliotekę jquery a to jest kod który nie działa:

                var zmien = 0;
		$('switch').addEventListener("click", function(siema) {
		  if (zmien === 0) {
			$('switch').addClass('switch_click');
			$('switch').removeClass('switch');
			$('kolo').addClass('kolo_click');
			$('kolo').removeClass('kolo');
			zmien = 1;
		  } else {
			$('switch').addClass('switch');
			$('switch').removeClass('switch_click');
			$('kolo').addClass('kolo');
			$('kolo').removeClass('kolo_click');
			zmien = 0;
		  }
		});

 Wie ktoś może czamu nie działa? Dodam jeszcze ze w konsoli pisze "Uncaught TypeError: $(...).addEventListener is not a function"

Answer 1

Nie podałeś w kodzie czy switch i kolo to id czy klasa

selecting elements

Comments

Zrobiłem to trochę prościej po prostu zmieniłem nazwe id zamiast kombinować z odpinaniem class

kod wygląda tak tez:

var zmien = 0;
var zmiana = "switch";
var id = document.getElementById(zmiana);

id.addEventListener("click", function(siema){
  if (zmien === 0) {
    document.getElementById('switch').id = 'switch_click';
		document.getElementById('kolo').id = 'kolo_click';
    zmien = 1;
  } 
	else {
    document.getElementById('switch_click').id = 'switch';	
		document.getElementById('kolo_click').id = 'kolo';	
    zmien = 0;
  }
});

 

---

Czemu zmieniasz id elementów na kliknięcie? Tak nie powinno się robić. Jeśli chcesz zmienić style tym elementom, to przestawiaj im klasy CSS, a nie zmieniaj ID.

---

Jak działa to czemu nie

---

Bo jeśli zmienisz ID elementu, a inny skrypt będzie się chciał pod niego podpiąć nie wiedząc o zmienionym ID, to nie złapie tego elementu. Jeśli zbudujesz link z kotwicą odnoszącą się do zmienionego ID, to ona nie przeniesie użytkownika do tej sekcji po otwarciu strony. Poza tym, nie jest dobrą praktyką stylowanie po ID, powinno się to robić używając klas.

A podejście "jak działa to czemu nie" daleko Cię w IT nie zaprowadzi.

---

dlatego po to dałem zmienną która ustawia prawidłowe id dla tego elementu

edit:

Dodam jeszcze ze jest tam zmienna o nazwie zmiana która ma wartość "switch" ale ta zmienna nie jest nigdzie ustawiana w if ale i tak działa i myślę ze działa to dlatego ze js zmienia tylko dla siebie id diva a w html zostaje cały czas takie same id

Answer 2

Z całym szacunkiem ale Twój kod już na pierwszy rzut oka wygląda po prostu bardzo źle. Może zamiast pytać się co nie działa opisz co chcesz osiągnąć i poproś o wskazówki. Najpierw z diva o klasie kolo usuwasz tą klasę

$('kolo').removeClass('kolo');

a następnie w else próbujesz się odwołać do elementu z którego wcześniej klasę usunąłeś 

$('kolo').addClass('kolo');

Comments

Tak myślałem ze to jest ten błąd