Cześć,
jak mogę zrobić, aby po naciśnięciu na diva zmieniało się jego tło, ale używając do tego this?
To pytanie aż za bardzo przypomina klasyczny problem X/Y - co próbujesz osiągnąć oraz dlaczego?
Ja tam nie rozumiem, chodzi o coś takiego?
<div onclick="this.style.backgroundColor = 'red'">Jakiś tekst</div>
Tak, o to chodzi, ale chcę to dodać w zewnętrznym pliku JS.
Patryk27 napisał(a):
To pytanie aż za bardzo przypomina klasyczny problem X/Y - co próbujesz osiągnąć oraz dlaczego?
Mam dużo divów i chcę, aby po naciśnięciu na jeden, zmieniało się jego tło, a nie chcę na to 100 linijek zużyć.
Chodzi o takie coś?
<script>
function changeColor(idElement)
{
document.getElementById(idElement).style.backgroundColor = 'red';
}
</script>
<div id="firstDiv" onclick="changeColor(this.id)">Jakiś tekst</div>
<div id="secondDiv" onclick="changeColor(this.id)">Jakiś tekst</div>
<div id="thirdDiv" onclick="changeColor(this.id)">Jakiś tekst</div>
Jak już napisałem wyżej, mam dużo divów i chcę, aby funkcja onClick wykonywała się na każdym tak samo. Nie chcę robić 100 funkcji dla oddzielnych divów,
Aaaa przepraszam, nie zauważyłem tego HTML na dole.
Jeszcze tak zapytam:
mam te divy i za pomocą takiej funkcji chcą sprawdzić, jaki ma kolor tło diva i je odpowiednio zmienić. Ale z tego, co widzę to po załadowaniu strony document.getElementById(id).style.backgroundColor jest nieustawione i muszę nacisnąć dwa razy, aby ustawiło i dopiero tło zmieniło.
Kod:
function tlo(id)
{
if(document.getElementById(id).style.backgroundColor == "#59dbfc" || document.getElementById(id).style.backgroundColor == "rgb(89, 219, 252)")
{
document.getElementById(id).style.backgroundColor = "#74ff59";
document.getElementById(id).style.border = "2px #3ada1a solid";
}else
{
document.getElementById(id).style.backgroundColor = "#59dbfc";
document.getElementById(id).style.border = "2px #4e93fa solid";
}
}
Czy da się zrobić, aby od razu ustawiało tło, albo jakoś inaczej wywołać tę funkcję?
Po pierwsze to masz przeciez napisane ze mozesz przekazywac obiekt a id jest niepotrzebne
Musisz pewnie w CSS ustawic defaultowy kolor
PS nie ustawiaj koloru tylko klase css
Jak dla mnie to jest za bardzo przekombinowane. Ja bym zrobił to tak:
<style>
.firstClass {
background-color: #74ff59;
border: 2px solid #3ada1a;
}
.secondClass {
background-color: #59dbfc;
border: 2px #4e93fa solid;
}
</style>
<script>
function changeColor(myElement)
{
myElement.classList.toggle("secondClass");
}
</script>
<div class="firstClass" onclick="changeColor(this)">Jakiś tekst</div>
<div class="firstClass" onclick="changeColor(this)">Jakiś tekst</div>
<div class="firstClass" onclick="changeColor(this)">Jakiś tekst</div>
A gdzie to drugie toggle wstawić? Bo faktycznie mam to class="class class".
No dobra, a po co Tobie DRUGIE toggle wstawiać?
Może nie zrozumiałem Twojego JS'a. Chodzi o to, aby po kliknięciu w danego DIV'a zmienił on kolor na drugi a następnie po kolejnym przyciśnięciu wrócił do swojego pierwotnego?
leonpro778 napisał(a):
No dobra, a po co Tobie DRUGIE toggle wstawiać?
Może nie zrozumiałem Twojego JS'a. Chodzi o to, aby po kliknięciu w danego DIV'a zmienił on kolor na drugi a następnie po kolejnym przyciśnięciu wrócił do swojego pierwotnego?
<div class="produkt" id="P1" onClick="mleko(), tlo(this.id)"> <img src="img/mleko.png"/><br/> Mleko</div>
JS:
function tlo(id)
{
if(document.getElementById(id).classList == "produkt")
{
document.getElementById(id).classList.toggle("produktZ");
}else
{
document.getElementById(id).classList.toggle("produkt");
}
}
Klasy oddzielaj po sobie spacjami, czyli:
<div class="produkt firstClass" onclick="changeColor(this);">Jakiś tekst</div>
Klasę secondClass
funkcja JS sama sobie "dopisze" nadpisując klasę firstClass
. Btw. Po co Ci taki kod w JS?
leonpro778 napisał(a):
Klasy oddzielaj po sobie spacjami, czyli:
<div class="produkt firstClass" onclick="changeColor(this);">Jakiś tekst</div>
Klasę
secondClass
funkcja JS sama sobie "dopisze" nadpisując klasęfirstClass
. Btw. Po co Ci taki kod w JS?
Czyli js powinien wyglądać tak?:
function tlo(id)
{
if(document.getElementById(id).classList == "produkt")
{
document.getElementById(id).classList.toggle("secondClass");
}else
{
document.getElementById(id).classList.toggle("firstClass");
}
}
Bo teraz jak wywoła else to div wygląda tak:
Źle, Twoja funkcja tlo(id)
wygląda tylko TAK:
function tlo(id)
{
document.getElementById(id).classList.toggle("secondClass");
}
Natomiast Twój DIV wygląda tak:
<div class="produkt firstClass" id="P1" onClick="mleko(); tlo(this.id)"> <img src="img/mleko.png"/><br/> Mleko</div>
leonpro778 napisał(a):
Źle, Twoja funkcja
tlo(id)
wygląda tylko TAK:function tlo(id) { document.getElementById(id).classList.toggle("secondClass"); }
Działa! Dziękuję za poświęcony czas.
Ale zes sie uparl na to id