Zmiana stylu buttona przy każdym kliknięciu

pytanie zadane 5 czerwca 2016 w JavaScript przez BumBumeq Nowicjusz (190 p.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="javascript.js"></script>

  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
            </div>
            <div class="col-sm-4 text-center">
                <button type="button" onclick="color()" class="btn btn-default">Click me!</button>
            </div>
            <div class="col-sm-4">
            </div>
        </div>
    </div>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

var a = 125;
var b = 125;
var c = 125;

function color() {
    
    if(a>=250) {
        a = a - 10;
    }
    else if(a<=5) {
        a = a + 10;
    }
    else {
        a = a + Math.floor(Math.random() * 5);
    }
    
    if(b>=250) {
        b = b - 10;
    }
    else if(b<=5) {
        b = b + 10;
    }
    else {
        b = b + Math.floor(Math.random() * 5);
    }
    
    if(c>=250) {
        c = c - 10;
    }
    else if(c<=5) {
        c = c + 10;
    }
    else {
        c = c + Math.floor(Math.random() * 5);
    }
    
    document.getElementsByClassName("btn-default").style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')' + '!Important';
    
};

Button po prostu nie zmienia swoje koloru przy kliknięciu :| Bardzo proszę o pomoc

4 odpowiedzi

odpowiedź 5 czerwca 2016 przez mitelak Pasjonat (23,330 p.)
wybrane 5 czerwca 2016 przez BumBumeq

Najlepsza

http://codepen.io/mitelak/pen/yJNZaJ
Można to zrobić na przykład tak ;) Przydałoby się tylko jeszcze losowe zmienianie + z - wylosowanej liczby, a nie że tylko się dodaje, ale takie coś chyba też spełnia swoją role :D

komentarz 5 czerwca 2016 przez BumBumeq Nowicjusz (190 p.)
edycja 5 czerwca 2016 przez BumBumeq

Wow, bardzo dziękuję :) Teraz tylko pozostało mi dokładnie przeanalizować kod :D

#EDIT

Nie rozumiem czemu po przekopiowaniu kodu do edytora button nie zmienia koloru :p Podpiąłem css oraz js i nic :(

komentarz 5 czerwca 2016 przez mitelak Pasjonat (23,330 p.)

Ogólnie pisałem w komentarzach pod spodem, ale teraz odpowiem tak całościowo.

Twój kod też by działał pod 2 zmianach. Po pierwsze getElementsByClassName("btn-default") zwraca tablicę elementów o danej klasie dlatego żeby wybrać ten konkretny button (tutaj jest on pierwszy w tablicy i ostatni zresztą) musimy zastosować etElementsByClassName("btn-default")[0] czyli tutaj wybralismy ten 1 element z tablicy.
Drugą rzeczą jest '!important' przy zmianie stylów
1. Javascript doda ten style liniowo w html, czyli będzie to ważniejsze i tak od arkusza zewnętrznego więc jeżeli nie dasz wcześniej gdzieś important dla tego tła to zmieniać Ci będzie prawidłowo
2. Nie wiem dlaczego nie działa to tutaj bo liniowo także można zastosować important :/
Kod już działa ale zostały 2 rzeczy do zmienienia
- nie wywoływanie funkcji onclickiem w html tylko poprzez addEventListener https://kornel.ski/pl/onclick
- oraz zwiększenie zakresu losowanie, bo przy 5 to te kolory praktycznie się nie różnią ;)

I to tyle :D

komentarz 5 czerwca 2016 przez mitelak Pasjonat (23,330 p.)

Podeślij mi zipa z tym jak podpiąłeś już wszystko i zobaczymy :)

komentarz 5 czerwca 2016 przez BumBumeq Nowicjusz (190 p.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="javascript.js"></script>
 
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
            </div>
            <div class="col-sm-4 text-center">
                <button type="button" class="btn btn-default">Click me!</button>
            </div>
            <div class="col-sm-4">
            </div>
        </div>
    </div>
     
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

var a = 125;
var b = 125;
var c = 125;
var btn = document.querySelector(".btn-default");

btn.addEventListener("click",function()
		 {
			 
			if(a>=250) {
				a = a - 10;
			}
			else if(a<=5) {
				a = a + 10;
			}
			else {
				a = a + Math.floor(Math.random() * 5);
			}
			 
			if(b>=250) {
				b = b - 10;
			}
			else if(b<=5) {
				b = b + 10;
			}
			else {
				b = b + Math.floor(Math.random() * 5);
			}
			 
			if(c>=250) {
				c = c - 10;
			}
			else if(c<=5) {
				c = c + 10;
			}
			else {
				c = c + Math.floor(Math.random() * 5);
			}
			 
			this.style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';
			 
		},false)

Rzeczywiście po takich zmianach kod działa na codepen. Gdy jednak u siebie na komputerze próbuję wyświetlić stronę button nie zmienia koloru :D

zip został wysłany na pw :)

komentarz 5 czerwca 2016 przez mitelak Pasjonat (23,330 p.)
edycja 5 czerwca 2016 przez mitelak

Ładujesz po prostu javascript w body i z tego co mi się wydaje (ekspertem od js nie jestem) to addEvenListener nasłuchuje (a przynajmniej próbuje) od razu po wczytaniu skryptu, kiedy jeszcze nie zdążyłeś złapać tego buttona javascriptem bo nie został on jeszcze stworzony. Najprostszym rozwiazaniem jest przerzucenie skryptu tam gdzie jego miejsce czyli na końcu body. Można ewentualnie sprawdzać czy jest wczytanie body i wtedy dopiero uruchamiać ten kod (tak jak document.ready w jquery) ;)

//edit tutaj przykład sprawdzania w head czy Twoje body jest gotowe do wykonywania tej funkcji http://youmightnotneedjquery.com/#ready

odpowiedź 5 czerwca 2016 przez Magicone Nałogowiec (45,100 p.)

>document.getElementsByClassName("btn-default")

AFAIR takie coś nie zwraca elementu, tylko listę. Proponuję odwołać się do elementu przez document.querySelector:

document.querySelector('.btn-default').style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ') !important';

komentarz 5 czerwca 2016 przez BumBumeq Nowicjusz (190 p.)

po zmianie dalej nie działa

komentarz 5 czerwca 2016 przez Magicone Nałogowiec (45,100 p.)

konsola coś rzuca?

komentarz 5 czerwca 2016 przez BumBumeq Nowicjusz (190 p.)

var a = 125;
var b = 125;
var c = 125;

function color() {
    
    if (a >= 250) {
        a = a - 10;
    } else if (a <= 5) {
        a = a + 10;
    } else {
        a = a + Math.floor(Math.random() * 5);
    }
    
    if (b >= 250) {
        b = b - 10;
    } else if (b <= 5) {
        b = b + 10;
    } else {
        b = b + Math.floor(Math.random() * 5);
    }
    
    if (c >= 250) {
        c = c - 10;
    } else if (c <= 5) {
        c = c + 10;
    } else {
        c = c + Math.floor(Math.random() * 5);
    }
    
    document.querySelector('.btn-default').style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ') !important';
    
}

Po poprawieniu kodu na taki wyświetla tylko "Missing 'use strict' statement. if(a >= 250) {", ale wydaje mi się, że zmiana zapisu na taki nie ma znaczenia :/

komentarz 5 czerwca 2016 przez Magicone Nałogowiec (45,100 p.)

Spróbuj wstawić 'use strict'; w funkcję color.

komentarz 5 czerwca 2016 przez BumBumeq Nowicjusz (190 p.)

nic to nie zmienia

komentarz 5 czerwca 2016 przez mitelak Pasjonat (23,330 p.)
edycja 5 czerwca 2016 przez mitelak

Chodzi o to żeby odpalić stronę wcisnąć Ctrl + Shift + J (w chrome) i wtedy zobaczyć w konsoli błędy. Jeżeli dodasz na początku "use strict"; to wyrzuci Ci te błędy które normalnie były pomijane też ;)

ps usuń '!important' z końca i będzie działać ;)

komentarz 5 czerwca 2016 przez BumBumeq Nowicjusz (190 p.)

Po usunięciu !important dalej nie działa :p

odpowiedź 5 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)

http://codepen.io/kkondratowicz/pen/NrqEdg

Nie podpinaj funkcji przez atrybut onclick ;-;

https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener - poczytaj

komentarz 5 czerwca 2016 przez BumBumeq Nowicjusz (190 p.)

coś mi nie działa ten Twój kod jeżeli zamienię z moim js'em :/

komentarz 5 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)

wklej ten swój cały kod na codepen i podeślij

komentarz 5 czerwca 2016 przez BumBumeq Nowicjusz (190 p.)

Nie zadziała, bo w moim kodzie jest użyty bootstrap, którego tam nie ma :p

komentarz 5 czerwca 2016 przez mitelak Pasjonat (23,330 p.)

Na codepenie kliknij w zębatke obok CSS i tam możesz na samym dole dodać albo ręcznie link, albo z Quick-add wybrać bootstrapa (poza tym to zmienia Ci tylko wygląd więc tak naprawdę mechaniki zmiany w js nie zmieni)

ps kod kolegi działa tylko te wartości są bardzo małe i żeby zobaczyć zmiane pomiędzy odcieniami szarości trzeba się naprawdę przyjrzeć

komentarz 5 czerwca 2016 przez BumBumeq Nowicjusz (190 p.)

Rzeczywiście kiedy kod umieszczę na codepen wszystko działa jak należy kiedy jest bootstrap zaś kiedy robię to u siebie na komputerze nie działa. Wydaje mi się, że js jest dobrze podpięty więc w czym tkwi problem to nie mam pojęcia.

Jeżeli chodzi o konsolę to wygląda to tak: