nicht angemeldet
Problem mit eigener Javascript-Klasse
Ich habe versucht mittels einer Klasse einen Div-Contaier zu bewegen.
Meine Klasse sieht so aus:
function Container(divid){
this.divid = divid;
this.move = containermove;
}
function containermove(x, y){
document.getElementById(this.divid).style.left = x + "px";
document.getElementById(this.divid).style.top = y + "px";
}
Meine HTML-Datei sieht so aus:
<style>
#mydiv{
position:absolute;
width:100px;
height:100px;
background-color:#ff0000;
left: 100px;
top: 100px;
}
</style>
<script src="divart.class.js" type="text/javascript" />
<script type="text/javascript">
obj = new Container("mydiv");
</script>
<div id="mydiv" onclick="obj.move(200,200);"></div>
Sinn der Sache ist, dass ein div, dass bei (100,100) leigt per Klick nach (200,200) verfrachtet wird.
Wenn ich allerdings auf den Container klicke meldet die Fehlerkonsole (Firefox) "obj is not defined".
Wo liegt der Fehler?
-
Hallo DaDyne,
ist das, wie Du es hier aufgeführt hast, auch die Reihenfolge im Dokument:
<script src="divart.class.js" type="text/javascript" />
<script type="text/javascript">
obj = new Container("mydiv");
</script>
<div id="mydiv" onclick="obj.move(200,200);"></div>Dann ist zum Zeitpunkt der Zuweisung in JS das DIV auch noch nicht da. Entweder Du drehst es um - den JS-Code hinter das DIV - oder Du nutzt den Event: onload().
Mit freundlichem Gruß
Micha-
Hi,
Dann ist zum Zeitpunkt der Zuweisung in JS das DIV auch noch nicht da. Entweder Du drehst es um - den JS-Code hinter das DIV - oder Du nutzt den Event: onload().
Daran wirds wohl nicht liegen, da die Klasse "Container" nichts mit dem HTML Element zu tun hat.
evtl. auch mal mit var davor probieren, wobei das wohl irrelevant ist.
Gruß
Christian.-
Hallo Christian S.,
Daran wirds wohl nicht liegen, da die Klasse "Container" nichts mit dem HTML Element zu tun hat.
Doch, es besitzt die ID. Aber obj im DIV hat nichgts damit zu tun. Trotzdem ist da noch mehr falsch.
function Container(divid){ this.div = document.getElementById(divid); this.div.onclick = function(e){ this.style.left = "200px"; this.style.top = "200px"; }; }und die Inizialisierung, wie bereits gesagt, umdrehen:
<div id="mydiv"></div> <script type="text/javascript"> var obj = new Container("mydiv"); </script>Mit freundlichem Gruß
Micha
-
-
-
Hallo,
Probier es mal damit, die Eigenschaften für x und y direkt als Element-Eigenschaften zu definieren.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>element.x, element.y</title> <style> ~~~~~~css #mein-div{ position:absolute; width:100px; height:100px; background-color:#ff0000; left: 100px; top: 100px; } ~~~~~~html </style> <script type="text/javascript"> ~~~~~~javascript /* <![CDATA[ */ window.onload=init; function init(){ var elem = document.getElementById("mein-div"); // "erstelle" drei neue Element-Eigenschaften, eine davon ein Event-Handler. elem.x = 300; elem.y = 200; elem.onclick = function(){ // this bezieht sich hier auf das Element (elem)! this.style.left = this.x + "px"; this.style.top = this.y + "px"; }; } /* ]]> */ ~~~~~~html </script> </head> <body> <div id="mein-div">test test test</div> </body> </html>am elegantesten ist es natürlich, wenn Du das css und das javascript auslagerst.
Gruß, Nils
--
Es gibt keine Lösung, weil es kein Problem gibt. (Duchamp)