Ändern der classe einer div mit id XY
Sven
- javascript
Hallo!
Ich würde gerne, sobald der User auf eine div-box klickt, die Box anders formatieren.
Mein Versuch:
<div class="subs">
<div class="sub">
<div class="subName">-</div>
<div id="a1" onclick="aendern('a1')" class="subChild">---</div>
<div id="a2" onclick="aendern('a2')" class="subChild">---</div>
</div>
<div class="sub">
<div class="subName">-</div>
<div id="b1" onclick="aendern('b1')" class="subChild">---</div>
</div>
</div>
und in der js-datei ist:
function aendern(id) {
var element = document.getElementByIdName(id);
if (element.className=='subChild') {
element.className='subHighlight';
} else {
element.className='subChild';
}
}
Ich hab bisher keine Erfahrung in JS gesammelt, aber sollte das nicht klappen? Ich hab auch schon einen Button positioniert und dem die Funktion zugewiesen, da passiert aber aucht nichts. Firebug scheint die Methode beim laden der Seite zu benutzen und dann nicht mehr >.<
Eingebunden ists so:
<html>
<head>
<title>###</title>
<link rel="stylesheet" type="text/css" href="./css/layout.css" media="all" />
<link rel="stylesheet" type="text/css" href="./css/print.css" media="print" />
<script src="./css/jscript.js" type="text/javascript"></script>
<head>
<body>
Was fehlt, ist der Button - kannst Du uns diesen Code noch zeigen? Ich vermute nämlich, dass der Fehler genau dort liegt.
Gruß, LX
Was fehlt, ist der Button - kannst Du uns diesen Code noch zeigen? Ich vermute nämlich, dass der Fehler genau dort liegt.
Gruß, LX
Den hab ich eigentlich wieder hinausgeworfen, denn mein Ziel ist es auf die einzelnen Divs klicken zu können. Das fände ich irgendwie intuitiver.
Den Button hatte ich aber so dargestellt:
<button onclick="aendern('a2')">Test</button>
function aendern(id) {
var element = document.getElementByIdName(id);
if (element.className=='subChild') {
element.className='subHighlight';
} else {
element.className='subChild';
}
}
das ist "fast" alles richtig, wenn auch etwas unelegant, aber getElementByIdName() gibt es nicht, es gibt getElementById(), getElementsByTagName(), getElementsByName() und auf neuren browsern auch getElementsByClassname()
mfG Felix Nehrke
P.S.: Besuche unseren Blog: <http://www.pommes-blog.de>
--
Manchmal gibs was neues :)
fo:| ch:| rl:( br:> n4:? ie:( va:) de:> zu:) fl:( ss:| ls:[ js:)
das ist "fast" alles richtig, wenn auch etwas unelegant, aber getElementByIdName() gibt es nicht, es gibt getElementById(), getElementsByTagName(), getElementsByName() und auf neuren browsern auch getElementsByClassname()
Ah super! Vielen Dank!
Ich hab bisher keine Erfahrung in JS gesammelt, aber sollte das nicht klappen?
du musst nicht im Trüben stochern, ein Blick in die Fehlerkonsole (Nicht in Firebug!!!) sagt dir was du falsch gemacht hast.
Struppi.
Hi,
<div id="a1" onclick="aendern('a1')" class="subChild">---</div>
es ist nicht nötig, die ID des aktuellen Elementes zu übergeben, um das aktuelle Element anschließend zu suchen, wenn der Event-Handler das aktuelle Element bereits als "dieses" Element kennt.
Ich hab bisher keine Erfahrung in JS gesammelt,
Die Sprachelemente sind gewöhnlich auf englisch benamst.
Cheatah
Hallo Cheatah,
es ist nicht nötig, die ID des aktuellen Elementes zu übergeben, um das aktuelle Element anschließend zu suchen, wenn der Event-Handler das aktuelle Element bereits als "dieses" Element kennt.
Die Sprachelemente sind gewöhnlich auf englisch benamst.
ich verstehe was du meinst, aber für jemand, der von sich behauptet, ...
Ich hab bisher keine Erfahrung in JS gesammelt
... ist das doch viel verlangt, finde ich.
<div id="a1" onclick="aendern(this)" class="subChild">---</div>
@Sven: Das Schlüsselwort 'this' übergibt eine Referenz auf das Element, in dessen Kontext es steht. Innerhalb der aufgerufenen Funktion aendern() brauchst du das Element dann nicht mehr mit getElementById() zu suchen - du bekommst direkt das Element übergeben, nicht seine ID.
So long,
Martin