Wykonywanie operacji na divie

Odpowiedz Nowy wątek
2019-08-09 10:02

Rejestracja: 3 lata temu

Ostatnio: 3 miesiące temu

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?

Pozostało 580 znaków

2019-08-09 10:49
Moderator

Rejestracja: 13 lat temu

Ostatnio: 3 godziny temu

Lokalizacja: Wrocław

0

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


edytowany 1x, ostatnio: Patryk27, 2019-08-09 10:49

Pozostało 580 znaków

2019-08-09 10:51

Rejestracja: 8 lat temu

Ostatnio: 1 dzień temu

2

Ja tam nie rozumiem, chodzi o coś takiego?

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

Pozostało 580 znaków

2019-08-09 10:56

Rejestracja: 3 lata temu

Ostatnio: 3 miesiące temu

0

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

Pozostało 580 znaków

2019-08-09 10:57

Rejestracja: 3 lata temu

Ostatnio: 3 miesiące temu

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

Pozostało 580 znaków

2019-08-09 11:12

Rejestracja: 8 lat temu

Ostatnio: 1 dzień temu

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>
Wystarczy przekazywać this i potem robić this.style.backgroundColor = 'red'; - nie ma potrzeby zabawy w dodatkowe idki. - Patryk27 2019-08-09 11:16
Oczywiście można i w ten sposób :) Z id'kami jest łatwiej jak dojdzie jakiś span, button czy cokolwiek :D - leonpro778 2019-08-09 11:25

Pozostało 580 znaków

2019-08-09 12:00

Rejestracja: 3 lata temu

Ostatnio: 3 miesiące temu

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,

Próbowałeś sposobu podanego piętro wyżej przez @leonpro778 ? - cerrato 2019-08-09 12:02

Pozostało 580 znaków

2019-08-09 12:04

Rejestracja: 3 lata temu

Ostatnio: 3 miesiące temu

0

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

To sprawdź i daj znać. Moim zdaniem to jest to, o co Ci chodzi :) - cerrato 2019-08-09 12:07
Tak, to jest to. Dziękuję - Gouda105 2019-08-09 12:14

Pozostało 580 znaków

2019-08-09 12:33

Rejestracja: 3 lata temu

Ostatnio: 3 miesiące temu

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

edytowany 1x, ostatnio: cerrato, 2019-08-09 12:38

Pozostało 580 znaków

2019-08-09 12:41

Rejestracja: 3 lata temu

Ostatnio: 2 godziny temu

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

edytowany 2x, ostatnio: stivens, 2019-08-09 12:52

Pozostało 580 znaków

2019-08-09 12:50

Rejestracja: 8 lat temu

Ostatnio: 1 dzień temu

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>
edytowany 1x, ostatnio: leonpro778, 2019-08-09 12:50
To toggle na obie klasy - stivens 2019-08-09 12:51
Heh, co znaczy na OBIE klasy??? :) - leonpro778 2019-08-09 12:52
No bo masz w pewnym momencie class="firstClass secondClass" - stivens 2019-08-09 12:53
Aaaa... o to chodziło. No tak, z tym się zgadzam ale efekt chyba jest osiągnięty :) Podałem tylko alternatywne rozwiązanie problemu. - leonpro778 2019-08-09 12:56
To ktory backgroundcolor jest wazniejszy?;) - stivens 2019-08-09 13:08
Nie ma tutaj ważny lub mniej ważny :) Jak to mówią "moje na wierzchu jest najważniejsze". Z klasami tak samo :D firstClass to wygląd DIV'a po załadowaniu strony, second po jego naciśnięciu :) - leonpro778 2019-08-09 13:12

Pozostało 580 znaków

Odpowiedz

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