getElementsByClassName alle ansprechen

wolf

Hallo,
ich möchte gern auf das Ergebnis von gEBClassName ein onclick abfangen, und bekomme es nicht hin..

Basi

Du musst das Array durchlaufen:

JavaScript

for (var i = 0; i < butn.length; i++)
    butn[i].onclick=function(){
      buton[i].innerHTML = "clicked";
    };

cottton

Lässt sich gut merken: getElementsByClassName
im Gegensatz zu zB getElementById

bei "getElements" bekommst du also mehrere =)

wolf

Das ich mehrere bekomme weis ich und das auch klar

Wusste nur net ob ich mit onclick durch ne schleife kann

Danke

cottton

Durch ne Schleife?
Das ist Wurst, wo Du etwas zuweist, solange das Objekt stimmt
... also hier zB

Code

buton[i]

wolf

naja ob ich onkliicks durch ne for schleife jagen kann um eben i zu erhalten..

Jetzt hab ich aber ein interresantes Problem:
http://jsfiddle.net/wolfwortmann/rFuA8/

TypeError: article[i] is undefined

JavaScript

window.onload=function(){
	var article = document.getElementsByClassName("art");
	var butn = document.getElementsByClassName("ddbtn");
	function toggleArt(i){
		if (article[i].style.height != "auto") {
			article[i].style.height = "auto";
			butn[i].style.transform = "rotate(-90deg)";
		}
		else{
			article[i].style.height = "52px";
			butn[i].style.transform = "rotate(0deg)";
		}
	};
	for (var i = 0; i < butn.length; i++){
		butn[i].onclick = function(){toggleArt(i);}
	};
};

Alles anzeigen

cottton

ich bekomm nur: Uncaught TypeError: Cannot read property 'style' of undefined

prüf mal mit, ob style.height auch gesetzt ist

JavaScript

for (var i = 0; i < butn.length; i++){ 
		butn[i].onclick=function(){
			if (article[i].style.height != "undefined"  <<<<<<<<<<<<<<
                && article[i].style.height != "auto"
            ) {
				article[i].style.height = "auto";
			}
			else{
				article[i].style.height = "52px";
			}

		};
	};

Alles anzeigen

EDIT:
achso: na Du hast 2 verschiedene codes hier einen im jsfiddle, und einen anderen hier

Du hast vergessen article und butn mit in die function zu geben.
function toggleArt(i,article,butn)
~~oder Du holst Dir die elemente erst IN der function, damit Du sie nicht mit rein geben musst~~ - geht net.

EDIT2:

JavaScript

window.onload=function(){
    function toggleArt(article,butn){
        if (article.style.height != "auto") {
            article.style.height = "auto";
            butn.style.transform = "rotate(-90deg)";
        }
        else{
            article.style.height = "52px";
            butn.style.transform = "rotate(0deg)";
        }
    };

    var article = document.getElementsByClassName("art");
    var butn = document.getElementsByClassName("ddbtn");
    for (var i = 0; i < butn.length; i++){
        butn[i].onclick = function(){toggleArt(article[i],butn[i]);}
    };
};

Alles anzeigen

wolf

Nein, die Elemente sind ja durch die vars butn und article erreichbar?!

Wieder der Fehler ...

TypeError: article is undefined

oh mahn :o

Wenn ich 0 statt i mitgebe funktioniert es zumindest halt bei dem ersten (0) Element.

Basi

Wenn du die CSS Werte nie definiert hast kannst du sie nicht abfragen, es geht hier nicht um die Elemente sondern lediglich um die CSS Werte.

wolf

Css ist definiert, zumindest im Orginal..!
Und soweit kommt es ja gernicht.

wolf

hier die Lösung: i wurde nicht mitgegeben.. danke lauras

JavaScript

window.onload=function(){
	function toggleArt(article,butn){
		if (article.style.height != "auto") {
			article.style.height = "auto";
			butn.style.transform = "rotate(90deg)";
		}
		else{
			article.style.height = "52px";
			butn.style.transform = "rotate(0deg)";
		}
	};

	var article = document.getElementsByClassName("art");
	var butn = document.getElementsByClassName("ddbtn");
	for (var i = 0; i < butn.length; i++){
		butn[i].setAttribute("data-i", i);
		butn[i].onclick = function(){toggleArt(article[this.getAttribute("data-i")],butn[this.getAttribute("data-i")]);}
	};
};

Alles anzeigen

Jetzt mitmachen!