Refresh po ponownym kliknięciu

Question

Witam, mam takie pytanie. Można zrobić tak, aby po kliknięciu na przycisk wykonała się jedna funkcja, a po drugim kliknięciu inna?

Lub

Jak po kliknięciu w przycisk zamienić kolorami divy (w sensie że jak jeden div jest czerwony, drugi niebieski to ten pierwszy ma otrzymać kolor niebieski, a drugi czerwony, tylko to nie ma to jednorazowo zamienić tylko po każdym kliknięciu)? Udało mi się zrobić tak:

---

CSS:

<style type="text/css">
        #dPiec {
             width: 30px;
            height: 30px;
            background-color: #000000;
            color: white;
           
        }
        #dSzesc {
             width: 30px;
            height: 30px;
            background-color: #d9d919;
            color: white;
            
        }

JS:

<script type="text/javascript">

function Kolory(){
            document.getElementById("dPiec").style.backgroundColor = "#d9d919"; //TU I NIŻEJ NIE POBIERA Z DIV TYLKO JA SAM USTAWIŁEM!
            document.getElementById("dSzesc").style.backgroundColor = "#000000";
            }

</script>

HTML:

<input type="submit" value="btSzesc" id="btSzesc" onclick="Kolory();"/>
<div id="dPiec"></div>
<div id="dSzesc"></div>

---

Bardzo byłbym wdzięczny za pomoc, pozdrawiam.

Answer 1

Ty w swoim kodzie JS podałeś tylko zmianę koloru tła, ale bez żadnego zdarzenia.

1. Zapisz w JS elementy HTML, które chcesz kliknąć.
2. Dopisz im zdarzenie kliknięcia + funkcję, która ma się wywołać po kliknięciu.
3. Ustal sobie w CSS jakąś dodatkową klasę dla divów klikniętych, które będą miały inne tło
4. A w funkcji za pomocą if'a sprawdzaj, czy kliknięty div ma ustaloną klasę. Jeśli nie ma to do dodajesz mu taką klasę, a w else ją usuwasz.

I za każdym razem kiedy klikniesz w diva będą sprawdzane te warunki, więc po każdym kliknięciu div na zmianę będzie otrzymywał klasę + nowy kolor i będzie miał tę klasę usuwaną ;)

Comments

1. A w funkcji za pomocą if'a sprawdzaj, czy kliknięty div ma ustaloną klasę. Jeśli nie ma to do dodajesz mu taką klasę, a w else ją usuwasz.

Albo po prostu poprzez element.classList.toogle('klasa'). Więcej na:

https://developer.mozilla.org/pl/docs/Web/API/Element/classList

 

---

oo właśnie
jakoś tego nie używałam za bardzo, ale lepiej tym sposobem ;)

---

Jeśli kolega jest dopiero początkujący to tak na prawdę zrobienie tego przez if'a nie zaszkodzi, bo później łatwiej zrozumie zasadę działania toogle :) oba rozwiązania powiedziałbym więc, że są w tym wypadku oki.

Answer 2

var div1 = document.getElementById("dPiec").style.backgroundColor,
      div2 = document.getElementById("dSzesc").style.backgroundColor;
function Kolory(){
if(div1=="#000000"){
            div1 = "#d9d919";
} else{
     div1 = "#000000";
}
 if(div2=="#d9d919"){
            div1 = "#000000";
} else{
     div2 = "#d9d919";
}
}
 Oprócz tego jest tu pełno drobych błędów takich jak nie odzielenie HTML od JS. Nie używaj zdarzenia onclick w HTML. Poczytaj sobie o addListenerach.

Comments

Sprawdź co Ci zwróci to:

document.getElementById("dPiec").style.backgroundColor

zapewne pusty ciąg znaków, taki kod próbuje pobrać tę wartość ze styli inline.

if(div1=="#000000")

Warunki nigdy by się nie spełniły, gdyż kolor zwracany jest w formacie RGB.

Dodatkowo, stosujmy ===

---

Dzięki za naprostowanie. Nie miałem pojęcia:)

Czyli jakbym porównał zmienną z kolorem w formacie RGB, to też by nie działało?

---

Wartości styli, które nie są przypisane inline pobieramy przez getComputedStyle