[JS] Łączenie CSS i JS przy pracy na divach - problem

pytanie zadane 17 października 2016 w JavaScript przez Iamhexi Obywatel (1,330 p.)
edycja 17 października 2016 przez ScriptyChris

Witam! Ucząc się JS, napotkałem problem. Otóż wg. tego co wiem, taki kod powinien działać:

function gatherResources()
{
       
    
    if (document.getElementById("pole2").style.backgroundColor == "#33cc33"){wood+=50; food+=50; gold+=50;}
    if (document.getElementById("pole3").style.backgroundColor == "#33cc33"){wood+=50; food+=50; gold+=50;}
    if (document.getElementById("pole4").style.backgroundColor == "#33cc33"){wood+=50; food+=50; gold+=50;}
    if (document.getElementById("pole5").style.backgroundColor == "#33cc33"){wood+=50; food+=50; gold+=50;}
    if (document.getElementById("pole6").style.backgroundColor == "#33cc33"){wood+=50; food+=50; gold+=50;}
    if (document.getElementById("pole7").style.backgroundColor == "#33cc33"){wood+=50; food+=50; gold+=50;}
    if (document.getElementById("pole8").style.backgroundColor == "#33cc33"){wood+=50; food+=50; gold+=50;}
    if (document.getElementById("pole9").style.backgroundColor == "#33cc33"){wood+=50; food+=50; gold+=50;}
    setTimeout("gatherResources()", 1000);
}

Funkcja jest podpięta, divy instnieją wersja z ... style.background-color == ... też nie działa. Wszystko ma wyzwalacze, dodam, że w CSS kolory są zdefiniowane. Nie chodzi o czystość kodu, ale o to, że po prostu nie daje zamierzonego efektu. Z góry dziękuje za pomoc i/lub rady!

Edit: Dołączam HTMLa i CSSa:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Sword and swords - the game</title>
    <style>
        body {    
             background-color: #002966;
             color: white;
            font-size: 22px;
           user-select: none;
            /* Background pattern from subtlepatterns.com */
        }
        
        #menu {
                visibility: visible;
        }
        
        #page {
            margin-top: 200px;
            margin-left: auto;
            margin-right: auto;
            width: 1000px;
            height: auto;
              }
        
        #resources {
        
        }
        
        .pole {background-color: #33cc33; border: solid 1px lightblue; height: 200px; width: 270px; float: left; padding: 5px; text-align: center; color: black; line-height: 180px; text-transform: uppercase; cursor: pointer; border-radius: 10px;}
        
        .pole:hover {background-color: #1aff1a;}
        
        #pole1 {}
        #pole2 {}
        #pole3 {}
        
        #pole4 {clear: both;}
        #pole5 {}
        #pole6 {}
       
        #pole7 {clear: both;}
        #pole8 {}
        #pole9 {}
        
        #empty{clear: both;}
        
    </style>
    <script type="text/javascript">
        var wood = 100;
        var food = 200;
        var gold = 500;
        var pole = new Array(9);
        var i = 0;
        for (i=0; i<=9; i++){
        pole[i]=0;
        }
        var przenosimy = 0;
       
           document.getElementById("empty").style.backgroundColor="white";
    </script>
    <script type="text/javascript" src="skrypt.js"></script>
</head>
    <body onload="Resources()" onselectstart="return false" onselect="return false" >
	 
        
        
<div id="page" onload="gatherResources()">
    <div id="resources"></div>
    <br><br>
    <div class="pole" id="pole1" onclick="putSoldiers(1)" ondblclick="moveSoldiers(1)"></div>
    <div class="pole" id="pole2" onclick="putSoldiers(2)" ondblclick="moveSoldiers(2)"></div>
    <div class="pole" id="pole3" onclick="putSoldiers(3)" ondblclick="moveSoldiers(3)"></div>
    <div class="pole" id="pole4" onclick="putSoldiers(4)" ondblclick="moveSoldiers(4)"></div>
    <div class="pole" id="pole5" onclick="putSoldiers(5)" ondblclick="moveSoldiers(5)"></div>
    <div class="pole" id="pole6" onclick="putSoldiers(6)" ondblclick="moveSoldiers(6)"></div>
    <div class="pole" id="pole7" onclick="putSoldiers(7)" ondblclick="moveSoldiers(7)"></div>
    <div class="pole" id="pole8" onclick="putSoldiers(8)" ondblclick="moveSoldiers(8)"></div>
    <div class="pole" id="pole9" onclick="putSoldiers(9)" ondblclick="moveSoldiers(9)"></div>
    <div id="empty"></div>
    
    <div id="menu">
        <form>
    <input type="button" value="Zbieraj złoto" id="gather">
    <input type="button" value="Zbieraj jedzenie" id="">
    <input type="button" value="Zbieraj drewno" id="">
    <input type="button" value="Rekrutuj żołnierzy" onclick="Recruit()" id="">Ilość: <input id="soldiers" type="number">
            </form>
    </div>

        </div>
        
    
        
       
        
    </body>
</html>

komentarz 17 października 2016 przez ScriptyChris Mędrzec (190,190 p.)

Nie chodzi o czystość kodu

Ok...

W podanym przez Ciebie kodzie nie widać inicjalizacji ani przypisania wartości do zmiennych wood, food oraz gold. Czy w konsoli są jakieś błędy?

Podaj jeszcze HTML i CSS, bo na nich operujesz.

komentarz 17 października 2016 przez Iamhexi Obywatel (1,330 p.)

Widzę jak to wygląda.

Jak będzie działać to sam nad tym popracuję :)

komentarz 17 października 2016 przez Iamhexi Obywatel (1,330 p.)

To wszystko jest na początku skryptu.

komentarz 17 października 2016 przez ScriptyChris Mędrzec (190,190 p.)

To wszystko jest na początku skryptu.

Ja nie widzę tego w Twoim poście.

komentarz 17 października 2016 przez Iamhexi Obywatel (1,330 p.)

var wood = 100;
        var food = 200;
        var gold = 500;

To nie o to chodzi ;/

komentarz 17 października 2016 przez xmentor Nałogowiec (49,520 p.)

Wydaje mi się że element.style.backgroundColor zwraca kolor w rgb(wartość, wartość, wartość) i to pobiera ze stylów inline a nie ze stylów zdefiniowanych wewnętrznie lub zewnętrznie - musiałbyś użyć getComputedStyle.

Dodatkowo od początku warto uczyć się dobrych praktyk, m.in. nie przekazywać nazwy funkcji jako stringa.

komentarz 17 października 2016 przez Iamhexi Obywatel (1,330 p.)

Dzięki zaraz sprawdzę czy działa.

komentarz 17 października 2016 przez Iamhexi Obywatel (1,330 p.)

Za bardzo nie umie tego użyć, ale na stackoverflow jest jakiś teamt :)

komentarz 17 października 2016 przez Iamhexi Obywatel (1,330 p.)

document.body.style.backgroundColor = "red";

Przykład, takie coś działa...

1	komentarz 17 października 2016 przez xmentor Nałogowiec (49,520 p.) Jeżeli kolory w stylach masz zapisane słownie tzn. background-color: red; to w JS będzie zwracało po prostu "red", natomiast kolor zdefiniowany szesnastkowo jest po prostu konwertowany do postaci rgb.

2 odpowiedzi

odpowiedź 17 października 2016 przez Ehlert Ekspert (212,670 p.)
wybrane 18 października 2016 przez Iamhexi

Najlepsza

Nie chodzi o czystość kodu,

Mi się wydaje, że właśnie chodzi. Odpaliłem to co napisałeś w CodePen i masz pomysł, wygląda to ciekawie. Entuzjazm znika z kodem. To że nie działa właśnie wychodzi z braku czytelności kodu.

wstawiaj skrypty na końcu body. Style również.
```
#pole1 {}
```
Czy to jest potrzebne?
Trzymasz trochę Js'a z HTML'em, trochę w plikach js. Zdecyduj się, a mianowicie przenieś wszystko do plików.
gatherResources błaga o pętlę. Wydaje mi się że w tym momencie można zmienić idki na klasy. Ale to tylko moja sugestia.
onload dla diva? kod w "". LINK