Wykonywanie operacji na divie

Odpowiedz Nowy wątek
2019-08-09 10:02
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
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
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
0

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

Pozostało 580 znaków

2019-08-09 10:57
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

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


01010100 01110101 01110100 01100001 01101010 00100000 01101110 01101001 01100101 00100000 01101101 01100001 00100000 01101110 01101001 01100011 00100000 01100011 01101001 01100101 01101011 01100001 01110111 01100101 01100111 01101111 00101110 00100000 01001001 01100011 00100000 01110011 01110100 01101111 01101110 01110100 00101110
edytowany 2x, ostatnio: stivens, 2019-08-09 12:52

Pozostało 580 znaków

2019-08-09 12:50
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
Liczba odpowiedzi na stronę

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