[gelöst] [Javascript] Div - onclick

[ChristianK]

Hi,
habe ein kleines Problem bei einem onclick eines DIV's. Unter dem Firefox geht es einwandfrei, aber der IE will mal wieder nicht

pic.setAttribute("onclick","map_click("+x+","+y+")");

Ich habe bereits versucht dies für den IE anzupassen, jedoch komm ich an einer Stelle einfach nicht weiter. Und zwar soll eine Funktion die 100DIV's anlegt, den DIV'a auch diesen onclick geben.

pic.setAttribute("onclick", function() {map_click(x,y);});

Jedoch funktioniert dies nicht. Er schreibt nun einfach "x" und "y" rein, statt den Wert der in der Variable x bzw. y steht.

<div style="width: 50px; height: 50px; background-image: url(../skin/pic/4.gif);" onclick="function () { map_click(x, y); }"/>

Was habe ich falsch gemacht? Habe schon so einiges probiert, aber bis jetzt ging nichts bei beiden Browsern...

Kann es sein, dass hier im Board die ENTER-Taste nicht mehr geht? Oder ist dies nur bei mir grad so?



Christian

 

[M8XiKiN6]

Vlt. Solltest du es mal so versuchen:

document.getElementById('pic').setAttribute("onclick","map_click("+x+","+y+")");

und bei deiner Div einfach Id="pic" einfügen.

ich glaub ich weiß warums da nicht geht:

<div style="width: 50px; height: 50px; background-image: url(../skin/pic/4.gif);" onclick="function () { map_click(x, y); }"/>

Du willst auf die Variablen x und y innerhalb der FUnktion zugreifen, die aber da nicht deklariert wurden.

versuchs mal So

<div style="width: 50px; height: 50px; background-image: url(../skin/pic/4.gif);" onclick="map_click(x, y);"/>

und deklariere die beiden variablen im Headbereich so:

<script type="text/Javascript">
var x = 0;
var y = 0;
</script>

Viel Glück

 

[Moloc]

Falls das setAttribute nicht hinhaut:
Dafür gibt es addEventListener für Standardbrowser.
Für den IE <= 7 attachEvent

Siehe auch https://www.mediaevent.de/javascript/event_listener.html

[edit]Bin etwas zu schnell mit Antworten gewesen... wo wird x und y definiert?[/edit]

 

[ChristianK]

Die Variablen X und Y sind in der darüberliegenden Schleife deklariert.

@M8XiKiN6

Habe alle deine Ideen ausprobiert. Jedoch alle ohne Erfolg.

function () { map_click(x, y); }

Dieser Code ist dafür da, dass der IE dies ausführt. Wenn ich es weg lasse, meckert er nur rum :-/

Deklariert wurden diese:

	var map_table=document.getElementById("map_table");
	var x, y, tx, ty, t, pic;	
	
	for (y=0; y<m_anzeige; y++) {
		tx=map_table.insertRow(map_table.rows.length);
		for (x=0; x<m_anzeige; x++) {
			ty=tx.insertCell(tx.cells.length);				
			pic=document.createElement("div");
			pic.id = "pic";
						
			pic.style.width="50px";
    		pic.style.height="50px";
      		pic.setAttribute("onclick","map_click("+x+","+y+")");      		
      		//pic.setAttribute("onclick", function() {map_click(x,y);});      		
      
			eMap[y][x] = pic;
			ty.appendChild(pic);	
		}
	}

Vieleicht hilft dies euch weiter

@ Moloc

Glaube dies hilft mir nicht so ganz weiter. Das wären dann ja 100 Events die da deklariert werdn müssen :-D Ich weiß nicht wie sich das auf die Performance auswirkt, aber von Vorteil wird dies leider bestimmt nicht sein.

Hoffe ihr könnt mir dennoch irgentwie helfen

 

[Moloc]

"onclick" ist nun mal ein Event und ändert daher nichts an der Performance. In JavaScript erstellt man Events mit addEventListener und nicht mit setAttribute.

Bei deinem Code:

		function () { map_click(x, y); }

x und y sind ja außerhalb dieser funktion definiert. Da du in der schleife x und y immer änderst, ändert sich dann auch für jede eingefügte funktion den Wert x und y. D.h. hier müsstest du immer die Werte "m_anzeige + 1" als Ergebnis für x und y bekommen. (Dieses Problem habe ich bisher immer mit einer eigenen Funktion gelöst (siehe unten: getExecFunc()))

Für folgenden Code:

		pic.style.width="50px";
    		pic.style.height="50px";

könnte man auch CSS einsetzen. Würde den Code übersichtlicher machen.

pic.id = "pic";

Eine ID ist immer eindeutig. Du weist allen erzeugten div-Elementen den selben id-wert zu, was natürlich keinen Sinn macht. Wenn du dies für CSS-formatierungen brauchst, verwende class (className (IE<=7)) oder sonstiges.


Hier ein funktionierender Code:

function getExecFunc(x, y) {
	return function() { map_click(x,y); };
}

function addEvent (obj, eventType, func, useCaption) {
	if (obj.addEventListener) {
		obj.addEventListener(eventType, func, !!useCaption);
	} else if (obj.attachEvent) {
		obj.attachEvent("on"+eventType, func);
	} else {
		obj["on" + eventType] = func;
	}
}

//[...]
// Hier kommt dein Code rein:
// Ersetze:
// pic.setAttribute("onclick","map_click("+x+","+y+")");
// mit
addEvent(pic, "click", getExecFunc(x,y), false);
//[...]

Das Beispiel sollte zeigen, wie es funktionieren kann.

 

[ChristianK]

Vielen, vielen Dank!


Dein Code geht perfekt Hast recht, die Tabelle bau ich noch auf CSS um. Weiß aber noch nicht, ob ich alles mit DIV's machen soll, oder nicht.

Dann habe ich wieder etwas dazugelernt. Hatte mich nämlich noch nicht mit den Listenern beschäftigt, was ich nun nachhole.

 

[halbesbit]

naja ist zwar wohl nicht mehr aktuell aber ich hatte das selbe prob und habe es so gelöst:

<div id="feld_001" onclick="Click1(this)"><center>feld_001</center></div>
dazu eine funktion:
function Click1 (element){
while (element.nodeName != "DIV" && element.nodeName != "BODY") {element=element.parentNode;}
alert(element.id); //zeigt die id des angeklicken div/elementes an !
}
das ganze habe ich für mein script benutzt und funktioniert mit:ie,ff,opera !
hier ein demo:https://www.halbesbit.de/demo/Felder/index.php