Wykonywanie operacji na divie

0

Cześć,
jak mogę zrobić, aby po naciśnięciu na diva zmieniało się jego tło, ale używając do tego this?

0

To pytanie aż za bardzo przypomina klasyczny problem X/Y - co próbujesz osiągnąć oraz dlaczego?

2

Ja tam nie rozumiem, chodzi o coś takiego?

<div onclick="this.style.backgroundColor = 'red'">Jakiś tekst</div>
0

Tak, o to chodzi, ale chcę to dodać w zewnętrznym pliku JS.

0
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ć.

4

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>
0

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,

0

Aaaa przepraszam, nie zauważyłem tego HTML na dole.

0

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ę?

0

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

2

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>
0

A gdzie to drugie toggle wstawić? Bo faktycznie mam to class="class class".

0

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?

0
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");
	}
}
0

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?

0
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:
screenshot-20190809131933.png

1

Ź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>
0
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.

0

Ale zes sie uparl na to id

1 użytkowników online, w tym zalogowanych: 0, gości: 1