Zmiana atrybutu div'a przy użyciu js

pytanie zadane 3 sierpnia 2015 w JavaScript przez Tomohomo Nowicjusz (190 p.)

Dajmy na to, że mamy 3 div'y:

<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>

Oraz ustawiony CSS do nich:

.box {
	background-color: #FFFFFF;
	width: 100px;
	height: 100px;
}

Jak przy użyciu onclick="funkcja();" zmienić jego, dajmy na to kolor tła? Póki co wykombinowałem coś takiego:

function mark(e) {
	var color = e.style.backgroundColor;
	color == '#FFFFFF' ? color = '#000000' : color = '#FFFFFF';
}

HTML

<div id="first" class="box" onlick="mark(this);"></div>
<div id="second" class="box" onlick="mark(this);"></div>
<div id="third" class="box" onlick="mark(this);"></div>

Niestety nie chce ruszyć. Ma ktoś pomysł jak to ugryźć? Mile widziane podpowiedzi, a nie suchy kod.

1 odpowiedź

odpowiedź 3 sierpnia 2015 przez Comandeer Guru (602,310 p.)
wybrane 3 sierpnia 2015 przez Tomohomo

Najlepsza

Co do [onclick]: https://pornel.net/onclick

Co do samego kodu: nie powinno się bawić ze stylami elementu bezpośrednio. Lepiej się bawić jego stanem, więc zmieniać jego klasę (elem.classList.toggle w nowszych przeglądarkach lub http://youmightnotneedjquery.com/#toggle_class jeśli musimy wspierać starsze IE).

Natomiast Twój kod działa, ale nie robi tego, co chcesz ;) W JS stringi są niemutowalne, tzn., że raz ustalonego stringu nie można zmienić, jedynie nadpisać. Tym samym są przekazywane przez wartość, nie referencję. Tym samym kiedy robisz color = e.style.backgroundColor w color masz po prostu kopię tego, co było w e.style.backgroundColor. Jeśli chcesz zmienić styl elementu musisz bezpośrednio do niego przypisać, zatem coś typu:

color == '#FFFFFF' ? e.style.backgroundColor = '#000000' : e.style.backgroundColor = '#FFFFFF';

Trzeba też zaznaczyć, że domyślne style elementu (z arkusza, a nie z atrybutu [style]) w elem.style się nie pokazują i można je pobrać jedynie przez funkcję getComputedStyle

komentarz 3 sierpnia 2015 przez Czort Nałogowiec (32,500 p.)

A może addClass(), chyba że autor tematu brzydzi się jQuery

komentarz 3 sierpnia 2015 przez Comandeer Guru (602,310 p.)

Raczej toggleClass, ale osobiście raczej nie widzę sensu używania do prostych rzeczy jQuery. IMO na dzień dzisiejszy ta biblioteka jest już przestarzała.

komentarz 3 sierpnia 2015 przez Tomohomo Nowicjusz (190 p.)

Tak. Jeśli chodzi o var color = e.style.backgroundColor to zauważyłem od razu po wklejeniu posta. Cały czas edytowało zmienną, a nie faktyczną część. :)

Nie wiem, czy dobrze to zrobiłem. Idę dobrą drogą, czy to kompletnie nie o to chodziło?

Funkcja start() jest dołączona do body onload oraz są zadeklarowane dwie klasy w CSS.

function start() {
	div.classList.add("tile","tileMarked");
	
	var divs = document.getElementByTagName('div');
	for(var i=0; i<divs.length; i++) {
		if(divs[i].className == 'tile' || divs[i].className == 'tileMarked')
			divs[i].onclick = function() {
				 divs[i].classList.contains("tile") ? divs[i].classList.toggle("tileMarked") : divs[i].classList.toggle("tile");
			};
	}
}

Jeśli chodzi o jQuery to jestem kompletnie zielony jak widać. Nawet js nie ogarniam, więc wolałbym po kolei. ;)

komentarz 3 sierpnia 2015 przez Comandeer Guru (602,310 p.)

Idziesz w dobrą stronę ;) Ale można to trochę ulepszyć - zapomnij o body[onload], cały skrypt JS po prostu przerzuć na koniec body

Proponuję coś takiego (kod z komentarzami): http://jsfiddle.net/Comandeer/ewvuhjgc/

komentarz 3 sierpnia 2015 przez Czort Nałogowiec (32,500 p.)

@Comandeer Pewnie wiele osób powie to samo o js:)

No ale racja, w małym projekcie jQuery troche mija się z celem.

komentarz 3 sierpnia 2015 przez Comandeer Guru (602,310 p.)

No, ja jestem jedną z tych osób, które twierdzą niezbicie, że jeśli nie trzeba JS, to się nie używa JS ;) Chyba że chodzi Ci o to, że JS jest przestarzały, z czym nie mogę się zgodzić - wystarczy spojrzeć na ES2015 (aka ES6) czy na dość zaawansowane drafty ES2016 (aka ES7). Natomiast jQuery jest przestarzałe - choćby z powodu tego, że ma monolityczną konstrukcję.

komentarz 3 sierpnia 2015 przez Tomohomo Nowicjusz (190 p.)

Wszystko działa jak należy! Dziękuję ślicznie. ;p

komentarz 3 sierpnia 2015 przez Czort Nałogowiec (32,500 p.)

Może i faktycznie jest nieco przestarzały, ale mimo wszystko ze wględu na "lekkość pisania" wielu pracodawców wymaga jego znajomości i prawdopodobnie będzie tak jeszcze kilka najbliższych lat.

komentarz 3 sierpnia 2015 przez Comandeer Guru (602,310 p.)

@Czort bo pracodawcy kierują się marketingiem, a nie wiedzą technologiczną i tutaj jest problem. Często też trzeba wspierać mityczne stare IE, które już dawno leżą w grobie, ale akurat jakiś super mega ważny klient wciąż używa XP z IE6, "bo może". I tak to działa. Zamiast promować dobre technologicznie rozwiązania promowane są te, które mają dobry marketing, np Angular.js czy React.js.