Zmiana tła po kliknięciu w przycisk

pytanie zadane 8 października 2019 w HTML i CSS przez lukasz290521 Obywatel (1,410 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

odpowiedź 8 października 2019 przez DawidK Nałogowiec (37,910 p.)
wybrane 8 października 2019 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/

odpowiedź 8 października 2019 przez Mariusz08 Maniak (62,300 p.)

Uwaga, podaję hasło: javascript event listener

1	komentarz 8 października 2019 przez Tomek Sochacki Ekspert (227,510 p.) heh, ciekawe skąd był ten minus skoro wg mnie podałeś idealny namiar na to, czego szukać w dokumentacji...