[Chris_Karczynski]

Nie ogarniam webu, a potrzebuje na szybko coś zakodować. Mam button
Start program

i chcę żeby po jego kliknięciu kolor zmienił się na zielony, a gdy jeszcze raz go klikniemy tzn. odklikniemy to żeby wrócić do poprzedniego koloru.

Mam skrypt
function changeColor() {
document.getElementById("btn2").color = "purple";
return false;
}

ale oczywiście nie działa. Pomoże ktoś zrobić mi tę jedną rzecz? Wiem, że to są podstawy i normalnie bym się tego nauczył od podstaw, ale potrzebuję to wyklepać na jutro do roboty ( ͡° ͜ʖ ͡°)

#programowanie #webdev #html #javascript

[CeZiK_]

@Chris_Karczynski: korzystałeś w CSS z hover i active?

[januzi]

@Chris_Karczynski: Jak chcesz, żeby pasowało do konstrukcji tego guzika, to dopisz onclick=changeColor() i w tej funkcji dopisz if, który sprawdzi jaki jest kolor. Jak chcesz, żeby było poprawnie, to guzik powinien mieć klasę, która się będzie zmieniać przy klikaniu (np. buttonon - buttonoff).

[Chris_Karczynski]

@CeZiK_: @januzi: Ciężko. Najpierw chcę zmienić kolor przycisku po kliknięciu na czerowny

Lib 1

function setColor() {
document.getElementById(btn1).style.color = "red";
}

Co tutaj jest źle?

[Hav0c]

@januzi: @Chris_Karczynski: i możesz zastosować metodologię bem ( ͡° ͜ʖ ͡°)

[januzi]

document.getElementById(btn1)

@Chris_Karczynski: btn1 powinno być w ' '

[Chris_Karczynski]

@januzi: Ok, ale zmienia się tylko tekst buttona, a nie nie kolor tła

[Makurise]

@Chris_Karczynski: Wrzuć this jako argument na onclicku i dodaj go do funkcji, to nie będziesz musiał szukać elementu w drzewie. No i zamień styl na klasę.

Lib 1

 const setColor = function(el) {
 el.className = el.className.split(' ').includes('on') ? 'button' : 'button on'
 }

 .button {
 position: absolute;
 width: 80px;
 height: 40px;
 top: 74px;
 left: 22px;
 background-color: #080;
 }

 .button.on {
 background-color: #800;
 }

[januzi]

@Chris_Karczynski: Bo color, to kolor tekstu. Jak chcesz zmienić tło, to od tego jest backgroundColor.

[Chris_Karczynski]

@Makurise: @januzi: Jeszcze jedno pytanie. Jak przekazać argumenty do funkcji?

Lib 1

var count = 1;
function setColor(color, color2) {
var property = document.getElementById('btn1');
if (count == 0) {
property.style.backgroundColor = color
count = 1;
}
else {
property.style.backgroundColor = color2
count = 0;
}
}

Generalnie to działa zajebiście, ale wolałbym przesyłać kolory w wywołaniu SetColor, ale na razie nie działa

[Makurise]

@Chris_Karczynski: Bo próbujesz wrzucić argumenty jako nieistniejące zmienne. Na onclicku w tym przypadku powinno być setColor('red', 'gray')

[Chris_Karczynski]

@Makurise: taa już to zauważyłem xD Dziś już kompletnie nic nie myślę

[Makurise]

@Chris_Karczynski: Tak czy siak przenieś style na klasę i edytuj tylko background-color jako styl, jeżeli chcesz tam wstawiać dowolne wartości. Tam w kodzie też nie ma potrzeby używania count jako Number, gdy możesz wrzucić to jako Boolean (true/false). Dodatkowo sprawdzanie czy count jest równe 0 mija się z celem, to tylko dodatkowe zbędne operacje, gdy wiemy, że 0 jest wartością falsy (jest traktowana w warunkach jako fałsz), więc można zamienić kolejność

[Chris_Karczynski]

@Makurise: nie ograniam tych klas. Mam kilka przycisków i muszą zmieniać swoje kolory niezależnie. Nie wiem jak to zrobić

[Chris_Karczynski]

@Makurise: Ok, udało się. Potrzebuję jeszcze tylko jednej funkcjonalności. Gdy zapalę 1 button to wszystkie pozostałe mają być na off. W sensie, że w 1 momencie może tylko 1 button być na czerwono, reszta na szaro.

[Aryze]

@Chris_Karczynski:

Masz już, żebyś się nie przepracowal ( ͡° ͜ʖ ͡°) https://pastebin.com/aHJ7Z2v3


button {
background-color: gray;
}
button.on {
background-color: red;
}

1
2
3
4
5

const buttons = [...document.querySelectorAll('button')];
for (const button of buttons) {
const otherButtons = buttons.filter(btn => btn !== button);
button.onclick = () => {
button.classList.add('on');
otherButtons.forEach(btn => {
btn.classList.remove('on');
})
}
}