mit onclick div-Box verschieben

[brockerdocker]

Hallo,
ich will durch klicken auf ein Bild/span-Bereich oder auf einen Link (ist egal was) eine div-Box an der Position des Mauszeigers beim klicken positionieren.
Ich habe schon einiges ausprobiert und habe dieses funktionierende Beispiel zusammengebastelt, das allerdings nicht genau so läuft wie ich will:

  
<span id="sonst">Dies ist ein Test</span>  
<script type="text/javascript">  
[code lang=javascript]  
document.getElementById('sonst').onclick = click;  
function click(event)  
{  
 if( ! event && window.event ) event = window.event;  
 document.getElementById("extra").style.left = event.clientX+'px';  
 document.getElementById("extra").style.top = event.clientY+'px';  
}  

~~~</script>  
<div id="extra" style="position: absolute; left: 20px; top: 100px; background-color: red; width: 400px; height: 40px;">  
</div>  
[/code]  
  
Mein Problem ist, dass mit  
  
`document.getElementById('sonst').onclick = click; `{:.language-javascript}  
  
der onclick-Aufruf nicht direkt als Attribut im span-Element, sondern im JavaScript-Bereich steht.  
Da ich mehrere Span-Elemente haben möchte, würde ich dann mit  
  
~~~html
<span id="sonst" onclick='click();'>Dies ist ein Test</span>  

die div-Box immer bei dem span-Element positionieren auf das geklickt wird. Dies ist ja mit dem 1. Beispiel nicht möglich, da immer mittels der id nur das erste span-Element überwacht wird.
Leider funktioniert die 2. Methode aber nicht. Da ich nicht verstehe wo der Fehler liegt, möchte ich euch um Hilfe bitten.
OK, das wars.
Danke schonmal, brockerdocker

Hier nochmal das 2. Beispiel:

  
<span id="sonst" onclick="click();">Dies ist ein Test</span>  
<script type="text/javascript">  
[code lang=javascript]  
function click(event)  
{  
 if( ! event && window.event ) event = window.event;  
 document.getElementById("extra").style.left = event.clientX+'px';  
 document.getElementById("extra").style.top = event.clientY+'px';  
}  

</script>

<div id="extra" style="position: absolute; left: 20px; top: 100px; background-color: red; width: 400px; height: 40px;">
</div>
[/code]

[splinter]

<span id="sonst">Dies ist ein Test</span>
document.getElementById('sonst').onclick = click;

Da ich mehrere Span-Elemente haben möchte, würde ich dann mit
<span id="sonst" onclick='click();'>Dies ist ein Test</span>
die div-Box immer bei dem span-Element positionieren auf das geklickt wird. Dies ist ja mit dem 1. Beispiel nicht möglich, da immer mittels der id nur das erste span-Element überwacht wird.

<span name="sonst">Dies ist ein Test</span>
<span name="sonst">Dies auch</span>

var obj=document.getElementsByName('sonst');
for (i=0;i<obj.length;i++) {
 obj.onclick = click;};

Das sollte dieses Problem eigentlich lösen.

Leider funktioniert die 2. Methode aber nicht. Da ich nicht verstehe wo der Fehler liegt, möchte ich euch um Hilfe bitten.

Die 2te funktioniert nicht?? Bei mir schon, oder ich hab nicht genau verstanden was du eigentlich vor hast.

[D.R.]

Hallo,

<span name="sonst">Dies ist ein Test</span>
<span name="sonst">Dies auch</span>

Ein <span>-Element darf aber kein name-Attribut haben. Siehe: http://de.selfhtml.org/html/referenz/attribute.htm#span@title=Attribut-Referenz

var obj=document.getElementsByName('sonst');
for (i=0;i<obj.length;i++) {
obj.onclick = click;};

Das sollte dieses Problem eigentlich lösen.

Wie willst du einer „[object HTMLCollection]“ einen Event-Handler geben?

mfg. Daniel

[brockerdocker]

Hi,
danke schonmal. Leider komme ich bisher damit noch nicht klar.

Also das hier:

<span id="sonst" onclick="click();">Dies ist ein Test</span>
<script type="text/javascript">
function click(event)
{
 if( ! event && window.event ) event = window.event;
 document.getElementById("extra").style.left = event.clientX+'px';
 document.getElementById("extra").style.top = event.clientY+'px';
}
</script>
<div id="extra" style="position: absolute; left: 20px; top: 100px; background-color: red; width: 400px; height: 40px;">
</div>

funktioniert bei mir leider nicht. Auch der Tipp mit
var obj=document.getElementsByName('sonst');...

ging bei mir nicht.

Ich glaube, dass dieser Aufruf: onclick="click();" nicht geht, da die Funktion "function click(event)" ja den Wert event erwartet. Ich weiß aber nicht, was dieser Wert sein muss. Wie kann ich also mit onclick diese Funktion so aufrufen, dass die div-Box auch bei der Maus positioniert wird?
Danke nochmal,
tschau brockerdocker

[brockerdocker]

Hallo,
ich habe jetzt einen Weg gefunden es so hinzubekommen wie ich möchte. Allerdings ist er relativ umständlich. Vielleicht hat ja jemand einen Vorschlag es besser zu machen.

<span id="1">Dies ist ein Test</span><br>
<span id="2">Dies ist ein Test1</span><br>
<span id="3">Dies ist ein Test2</span><br>
<script type="text/javascript">
document.getElementById('1').onclick = click;
document.getElementById('2').onclick = click;
document.getElementById('3').onclick = click;
function click(event)
{
 if( ! event && window.event ) event = window.event;
 document.getElementById("extra").style.left = event.clientX+'px';
 document.getElementById("extra").style.top = event.clientY+'px';
}

</script>

<div id="extra" style="position: absolute; left: 20px; top: 100px; background-color: red; width: 400px; height: 40px;">
</div>

mfg brockerdocker

[D.R.]

Hallo,

ich habe jetzt einen Weg gefunden es so hinzubekommen wie ich möchte. Allerdings ist er relativ umständlich. Vielleicht hat ja jemand einen Vorschlag es besser zu machen.

<span id="1">Dies ist ein Test</span><br>
<span id="2">Dies ist ein Test1</span><br>
<span id="3">Dies ist ein Test2</span><br>
<script type="text/javascript">
document.getElementById('1').onclick = click;
document.getElementById('2').onclick = click;
document.getElementById('3').onclick = click;

*g*, das sieht ja schon fast wie die Lösung aus, die ich gerade gepostet habe.

Aber Achtung: IDs dürfen nicht mit einer Zahl beginnen. An deiner Stelle, würde ich es so machen:

  
var alleSpans = document.getElementsByTagName("span");  
for (var i = 0; i < alleSpans.length; i++)  
 alleSpans[i].onclick = click;  

Falls du noch andere <span>s in deinem Dokument hast, wäre es evtl. sinnvoll, die Suche einzugrenzen. Z.B.:

document.getElementById("spanparent").getElementsByTagName("span");

oder du verwendest Klassen. Dabei müsstest du dir aber zuerst eine „getElementsByClassName“-Funktion schreiben. Wenn du willst, kann ich dir auch meine posten ;-)

mfg. Daniel

[brockerdocker]

Hi!

Aber Achtung: IDs dürfen nicht mit einer Zahl beginnen. An deiner Stelle, würde ich es so machen:

var alleSpans = document.getElementsByTagName("span");
for (var i = 0; i < alleSpans.length; i++)
alleSpans[i].onclick = click;

>   

Juhu, danke, das ist die Lösung! So werd ichs machen.  
Also dann, danke nochmal und schönen Abend noch,  
brockerdocker

[D.R.]

Hallo,

Ich habe einfach mal ein bisschen an deinem Beispiel herumprobiert und das „onclick“-Attribut gegen eine Funktionsreferenz getauscht. Herausgekommen ist das hier

Ich glaube, dass dieser Aufruf: onclick="click();" nicht geht, da die Funktion "function click(event)" ja den Wert event erwartet.

Du bekommst den auch, gibst ihn aber nicht weiter.

mfg. Daniel