Diskuze: Problém s DOM

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

tomass

Člen

tomass:8.6.2014 22:40

Zdravím, mám takový menší problém s DOM v JavaScriptu, mám tady jedno školní zadání na práci s DOM a nevím si už rady, máme připravené 3 boxy. 1. box je červený, prostřední je zdrojový box a třetí box je modrý. V prostředním z nich máme vygenerovat 20 divů, poté když na div klikneme jednou, tak se označí červeně, když dvakrát, tak se označí modře a když třikrát, tak se zase odznačí, a poté když označím několik divů třeba červeně a kliknu do toho červeného divu, tak se tam ty divy přesunou najednou z toho zdrojového boxu, tohle mi všechno funguje, ale když chci přesunout zase modré divy do toho modrého boxu, tak se najednou nepřesunou, nevím čím to může být, navíc tam mám úplně stejný kód jak u toho červeného, který se mi najednou přesune.
Tady mám zdrojový kód:

ctverce.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="ctverce.css"/>
    <title>Ctverce</title>
</head>
<body>
<div class="main">
    <div id="cilcer"></div>
    <div id="zdroj"></div>
    <div id="cilmod"></div>
</div>
<script type="text/javascript" src="ctverce.js"></script>
</body>
</html>

ctverce.css

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.main > div {
  width: 300px;
  height: 300px;
  border: 2px solid black;
  margin: 10px 5px;
  float: left;
  background-color: lightgray;
}

.ctverec {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 2px;
  float: left;
  line-height: 50px;
  text-align: center;
  background-color: white;
}

.ctverec.cer, #cilcer {
  background-color: lightcoral;
}

.ctverec.mod, #cilmod {
  background-color: lightskyblue;
}

#zdroj div {
  cursor: pointer;
}

#zdroj div:hover {
  background-color: lightgreen;
}

#cilcer, #cilmod {
  cursor: cell;
}

ctverce.js

(function () {
    /*
     1) vygenerovat 20 DIVu s tridou "ctverec" do kontejneru "zdroj"
     2) nastavit udalosti aby po kliknuti na "ctverec" doslo k cyklickemu prepinani stavu ctverce mezi neaktivni/cerveny(trida "cer")/modry(trida "mod")
     3) nastavit udalosti aby po kliknuti na "cilcer" nebo "cilmod" doslo k presunu ctvercu dane barvy ze zdroje na zvoleny cil
     */
    var i, j, k, div, cislo, cerveny, modry, zdroj, divC, divM;

    zdroj = document.getElementById("zdroj");
    cerveny = document.getElementById("cilcer");
    modry = document.getElementById("cilmod");


    for (i = 1; i <= 20; i++) {
        div = document.createElement("div");
        div.className = "ctverec";
        zdroj.appendChild(div);
        cislo = document.createTextNode(i);
        div.appendChild(cislo);
    }

    zdroj.addEventListener("click", function (event) {
        if (event.target != event.currentTarget && event.target.className == "ctverec") {
            event.target.className = "ctverec cer";
        } else if (event.target != event.currentTarget && event.target.className == "ctverec cer") {
            event.target.className = "ctverec mod";
        } else if (event.target != event.currentTarget && event.target.className == "ctverec mod") {
            event.target.className = "ctverec";
        }
    });

    cerveny.addEventListener("click", function () {
        divC = document.getElementsByClassName("ctverec cer");
        for (j = 0; j < divC.length; j++) {
            cerveny.appendChild(divC[j]);
        }
    });

    modry.addEventListener("click", function () {
        divM = document.getElementsByClassName("ctverec mod");
        for (k = 0; k < divM.length; k++) {
            modry.appendChild(divM[k]);
        }
    });

})
    ();

Odpovědět

8.6.2014 22:40

Honza Bittner

Tvůrce

Honza Bittner:8.6.2014 22:55

A copak hlásí konzole?

Nahoru Odpovědět

8.6.2014 22:55

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

tomass

Člen

tomass:8.6.2014 22:59

V konzoli sem si zkoušel vypsat délku toho cyklu u toho modrého divu a normálně se mi vypsala délka taková, kolik bylo označených divů, jináč mě nic jiného nenapadlo zkoušet, právě sem si říkal, jestli není problém v tomhle , když se mi ty modré divy přesouvají po jednom a ty červené v pohodě najednou.

Nahoru Odpovědět

8.6.2014 22:59

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.