onClick auf Div's definieren

html.de-Forum HTML, XHTML & CSS
1

Hey Leute,
ich weis nicht in welche Kategorie das Thema soll, HTML, CSS oder JavaScript. Ich habe es jetzt mal hier gepostet.
Es geht um folgendes: Ich bin gerade dran ein kleines Framework zu schreiben und will dabei auf verschiedene Divs im Hintergrund ein onClick setzten. So muss der User dann nicht immer „

“ schreiben sondern müsste nur "
schreiben.
Wie kann ich das realisieren?

2

Soll es ein JavaScript-Framework sein? Dann wäre JavaScript der richtige Bereich gewesen.

Und zu deiner Frage: Du kannst auch beim onload der Seite in jedem Element Attribute ergänzen. Das geht natürlich nur per JavaScript. In deinem Fall müsstest Du bei bestimmten IDs einfach das onclick-Attribut ergänzen.

window.onload = document.getElementById("xy").onclick = function { alert('test'); }

(nur vom Sinn her, kein funktionierendes Beispiel)

3

Nur die ID’s kann der User selber festlegen, also geht das net. Warum kann man eigentlich divs nicht mit der Klasse nehmen oder verändern?

4

Über JavaScript kannst Du auch Klassen ansprechen, ja, das geht.

5

Aber wichtig ist, dass getElementsByClassName nicht in allen browsern funktioniert (z.B. nicht im IE).
Deswegen solltest du alle Elemente durchgehen, ob diese den Klassennamen haben.
Du kannst alle Elemente selektieren in dem du folgendes machst:

var allElements = document.getElementsByTagName("*");

Den Klassennamen kannst du übrigens so abfragen

var element = irgend ein Element;
alert(element.className);
6

Tipp für Deine nächste Wahl des richtigen Unterforums: Da Du im Thema angibst, dass es um „onClick“ geht, und das ein JavaScript-Event-Handler ist, wäre das JavaScript-Forum naheliegend gewesen. In HTML ist es jedenfalls völlig falsch aufgehoben, weil HTML ja nur eine Strukturbeschreibungssprache ist und nur die Semantik des Inhalts beschreibt.

7

und kann ich auch eine bestimmte Funktion auf ein Div-Element setzten?
[HTML]document.GetElementByID(‚xy‘).onclick = function test();[/HTML]
Wenn ich es so schreibe geht es net.

8

Wenn du eine vorhandene Funktion starten willst wie test muss es so aussehen

      document.GetElementByID('xy').onclick = test;

Dafür müsstest du deine Funktion aber auch als variable definieren (Sieht fast genau aus wie ner „normalen“ Funktion.

var test = function() {
  //Anweisungen
}[B];[/B]

Nicht das Semikolon vergessen, da du hier eien variable zuweist.
Kannst auch eien anonyme Funktion ausführen lassen enn das Div geklickt wurde.

document.GetElementByID('xy').onclick = function() {
  //Anweisungen
};
9

Vielen Dank, es geht!

10

So weit läuft alles, auch mit dem document.getElementsByClassName(‚xy‘)
Nun stehe ich aber vor dem nächsten Probleme. Was ist wenn es ein Div mit dieser Klasse nicht gibt.
Ich habe es mit if versucht:
[HTML]
function setonclick(){
if(document.getElementsByClassName(‚whiteitem‘)){
var whiteitem = document.getElementsByClassName(‚whiteitem‘);
var whiteitemparent = whiteitem[0].parentNode.id;
for(i=0;i<whiteitem.length;i++) {
whiteitem[i].onclick = function(){
goto(this);
};
whiteitem[i].id = whiteitemparent;
} }

}

[/HTML]
Nun weis ich aber nicht ob es einfach mit [HTML]if(document.getElementsByClassName(‚whiteitem‘)){[/HTML]geht, dann das liefert eigentlich ein Array zurück. Wie kann ich jetzt prüfen ob es überhaupt ein Div mit dieser Klasse gibt?

11 
if(document.getElementsByClassName('whiteitem').length == 0)

Ein Array hat eine Länge :slight_smile:
Worüber ich mir eher sorgen machen würde. getElementsByClassName kennt der IE nicht. Da musst du ein workarround machen.
Such mal im Javascript Unterforum nach Lightbox Layer. Da habe ich eine getElementsByTagName Funktion geschrieben

12

Das Script ist eh nur für den Safari-Browser auf dem iPhone, deswegen interessiert mich der IE nicht. Vielen Dank.

13

Hab mich eh vertan :smiley: stand im anderen Thread.

Document.prototype.getElementsByClass = function (className, tags) { if(tags == undefined) tags = "*"; var newElement = new Array(); var element = document.getElementsByTagName(tags); for(i = 0; i < element.length; i++) { if(element[i].className == className) { newElement[newElement.length] = element[i]; } } if(newElement.length == 0) return false; return newElement; }; Wenn du den Code einfügst kannst du getElementsByClass benutzen. Musst also nur deins dafür „etwas“ ändern. Von: document.getElementsByClassName => document.getElementsByClass

Edit: Fürs Iphone interessant. Denk dran den Viewport einzustellen. Desweiteren google mal nach window.onorientationchange :smiley:

14

Jaja, das mit dem Viewport darf man nicht vergessen.