Mi a hiba a kódban?
Azt szerettem volna elérni, hogy ha egy elemre rákattintunk, akkor az egyik div-ből (box1) kerüljön át a másik div-be (box2), illetve, ha már a box2-ben van, akkor vissza a box1-be.
Az az érdekes, hogy ha nem class-t adok meg az elemnek, hanem id-t, akkor tökéletesen működik. Pedig szerintem jól jártam körül a tömböt.
A konzol nem ír ki hibát. :(
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 200px;
border: 3px solid black;
margin-bottom: 10px;
}
#box2 {
width: 100px;
height: 200px;
border: 3px solid black;
}
.elemek {
position: relative;
top: 50%;
left: 50%;
background-color: red;
width: 50px;
height: 150px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="box1">
<div class="elemek"></div>
</div>
<div id="box2">
</div>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var elemek = document.getElementsByClassName("elemek");
var i;
var box2 = document.getElementById("box2");
for (var i = 0; i < elemek.length; i++) {
elemek[i].onclick = function() {
if (box1.contains(elemek[i]) == false) {
box2.appendChild(this);
}
else {
box2.appendChild(this);
}
}
}
</script>
</body>
</html>
Köszi a segítséget!
UPDATE! :D
Rájöttem, hogy az else ágban is a box2-be akartam küldeni az elemet, viszont ha átírom box1-re, akkor sem történik semmi, szóval a hiba ugyanúgy fent áll. :(
válasza:A for ciklusban minden elemre hozzáadod az eseménykezelőt, ez eddig oké.
Lefut a hozzáadás, az i értéke 1 lesz.
Rányomsz a cuccra és a következő sorban:
if (box1.contains(elemek[i]) == false) {
az elemek[i], azaz elemek[1] undefined, hiszen csak 1 ele van (0. index létezik csak)
Visznot számomra picit érthetetlen, ha utána this-ként hivatkozol rá, a feltételben mért nem ugyanezt teszed? Ez megoldaná a problémát:
if (box1.contains(this) == false) {
És ekkor a "then" ágban kell a box2, az else-ben a box1, nem úgy ahogy az első kommentedben írtad.
válasza:Bocs, helyesen:
És ekkor a "then" ágban kell a box1, az else-ben a box2, nem úgy ahogy az első kommentedben írtad.
Hisz te azt írtad, hogy az else ágat írod át box1-re.
Amúgy pedig felesleges az == false, és akkor mehet az else-be a box1:)
válasza:Kicsit optimalizálva:
* A külső dobozok CSS-definícióit egyesítettem
* Inkább a belső dobozra (amiből egy van, ezért azonosítóval hivatkozunk rá) való rákattintásakor megyünk végig a külső dobozokon (amikből több van, ezért osztálynévvel hivatkozunk rájuk), és ellenőrizzük, hogy tartalmazzák-e azt. Ha igen, akkor a belső dobozt arréb rakjuk a következő külső dobozba.
válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!