• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmiana tła po kliknięciu w przycisk

0 głosów
57 wizyt
pytanie zadane 5 dni temu w HTML i CSS przez lukasz290521 Obywatel (1,010 p.)
Cześć podesłał by ktoś poradnik albo wytłumaczył by jak zrobić aby tło zmieniło się po kliknięciu w dany przycisk

Tłumaczę jak by to miało działać. Użytkownik jest zalogowany na stronie i chciałbym zrobić podobną jak w messegerze że jest motyw biały i czary, przykład:

Użytkownik jest zalogowany i wchodzi w opcje->zmień tło->wybiera sobie spośród jakiś np: czerwony po wciśnięciu jakiegoś zmienia się to tło na stałe ale tylko u niego a nie u innych użytkowników.

Tło jest w divie i chodzi aby jakoś ingerować po wciśnięciu w przycisk aby tło się zmieniło tylko u niego

 Byłbym wdzięczny gdyby ktoś mógł by mi podesłać poradnik lub coś takiego.

Dziękuję bardzo :)

2 odpowiedzi

+1 głos
odpowiedź 4 dni temu przez DawidK Gaduła (3,770 p.)
wybrane 4 dni temu przez lukasz290521
 
Najlepsza

Będziesz potrzebował w bazie oprócz zmiennych dla nazwy i hasła również zmiennej dla koloru. Po zalogowaniu ustawiasz kolor diva na ten z bazy.

co do samego ustawiania to przeanalizuj poniższy kod - trochę powinno pomoc, "zasymulowałem" w nim baze przy pomocy tablicy userów, ale generalnie zasada jest podobne:

loguje się -> z bazy ustawiany jest kolor użytkownika -> do przycisku przypisywany jest id użytkownika, którego kolor ma się ewentualnie zmienić -> po zmianie nowy kolor się ustawia i jest również podmieniany w bazie.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Logowanie</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div id='background'>
        <select id='user-select' onchange='login();'>
            <option value=0 selected >pierwszy</option>
            <option value=1>drugi</option>
        </select>
        <h3>użytkownik</h3>
        <h4 id='user-name'></h4>
        <p>wybierz kolor:</p>
        <input id='color-input' type='color' value='#FFFFFF'>
    </div>

    <script src='main.js'></script>
</body>
</html>

main.js

function User(id, color, name) {
    this.id = id;
    this.color = color;
    this.name = name;
  }

const firstUser = new User(0,'#FFFFFF', 'uzytkownik_1');
const secondUser = new User(1,'#FFFFFF', 'uzytkownik_2');

const users = [];

users.push(firstUser);
users.push(secondUser);

const background = document.querySelector('#background');
const userName = document.querySelector('#user-name');
const colorInput = document.querySelector('#color-input');

userName.innerHTML = users[0].name;
colorInput.value = users[0].color;
colorInput.onchange = function() { changeColor(0); };

function login() {
    let whichUser = parseInt(document.querySelector('#user-select').value);

    userName.innerHTML = users[whichUser].name;
    background.style.backgroundColor = users[whichUser].color;
    colorInput.value = users[whichUser].color;
    colorInput.onchange = function() { changeColor(whichUser); };
}

function changeColor(user) {
    let i = user;
    users[i].color = colorInput.value;
    background.style.backgroundColor = colorInput.value;
}

Jeżeli chodzi o dane z bazy do js i na odwrót to obejrzyj:

https://www.youtube.com/watch?v=82hnvUYY6QA

przyda Ci się również:

https://miroslawzelent.pl/kurs-php/logowanie-do-strony-sesja-wstrzykiwanie-sql/

0 głosów
odpowiedź 5 dni temu przez Mariusz08 Nałogowiec (49,140 p.)

Uwaga, podaję hasło: javascript event listener

1
komentarz 5 dni temu przez Tomek Sochacki Mędrzec (190,640 p.)
heh, ciekawe skąd był ten minus skoro wg mnie podałeś idealny namiar na to, czego szukać w dokumentacji...

Podobne pytania

0 głosów
0 odpowiedzi 101 wizyt
0 głosów
1 odpowiedź 75 wizyt
pytanie zadane 12 lipca w HTML i CSS przez Hardwell Gaduła (4,640 p.)
0 głosów
3 odpowiedzi 78 wizyt
Porady nie od parady
Forum posiada swój własny serwer Discord, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

66,984 zapytań

113,890 odpowiedzi

241,334 komentarzy

46,940 pasjonatów

Przeglądających: 218
Pasjonatów: 17 Gości: 201

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...