Hallo Leute,
für ein größeres Projekt, habe ich mit folgendem Ziel:
Einzelne HTML-Seiten haben mehrere Untermenüs, wobei diese bei Klick bestimmte section-Elemente eingeblenden und alle anderen auf gleicher Ebene ausblenden sollten -gleichzeitig sollten die button-Elemente je nach Zustand eine bestimmte Hintergrundfarbe erhalten-
diesen Code geschrieben:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
button{background-color:green;}
section{display:none;}
</style>
</head>
<body>
<button value="0">AAAAA</button>
<button value="1">BBBBB</button>
<section>
<p>AAAAA
</section>
<section>
<p>BBBBB
</section>
<script src="script.js"></script>
</body>
</html>
var button = document.getElementsByTagName("button");
var section = document.getElementsByTagName("section");
for(var i = 0; i < button.length; i++) {
button[i].onclick = function() {
var button_index = this.value;
if(this.style.backgroundColor.indexOf("red") > -1){
this.style.backgroundColor = "green";
section[button_index].style.display = "none";
}
else {
for(var i = 0; i < button.length; i++){
button[i].style.backgroundColor = "green";
section[i].style.display = "none";
}
this.style.backgroundColor = "red";
section[button_index].style.display = "block";
}
}
}
Nun würde ich es gern so haben, dass ich den index (bzw die Position) des gedrückten Button-Elements auslesen kann um es dann in der Variable button_index zu speichern und das gewünschte Section-Element aufzurufen.
Somit könnten im HTML die value-Attribute wieder raus, und das ganze würde vollautomatisch funktionieren.
Ich hatte mich gefreut als ich die JavaScript-Eigenschaft selectedIndex fand, jedoch ist die an das Options-Ellement gekoppelt.
Es muss doch eine möglichkeit geben, die Position meiner Button-Elemente auszulesen, bitte beachtet bei Vorschlägen, dass sich die Positionsangabe auf die Buttons beschränken muss, also eine Position im Kontext aller Elemente bringt mich nicht weiter.
Würde mich sehr freuen wenn jmd eine Lösung hat.
LG vsenol