getElementsByClassName alle ansprechen

wolf · 26. März 2014

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

Basi · 26. März 2014

Du musst das Array durchlaufen:

JavaScript

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

cottton · 26. März 2014

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

bei "getElements" bekommst du also mehrere =)

wolf · 26. März 2014

Das ich mehrere bekomme weis ich und das auch klar

Wusste nur net ob ich mit onclick durch ne schleife kann

Danke

cottton · 26. März 2014

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

Code

buton[i]

wolf · 26. März 2014

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 · 26. März 2014

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 · 26. März 2014

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 · 26. März 2014

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 · 26. März 2014

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

wolf · 28. März 2014

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

getElementsByClassName alle ansprechen

Jetzt mitmachen!

Teilen