nicht angemeldet
gegenseitige Prüfung
Gunnar Bittersmann
JürgenBHallo Forum,
Ihr müsst mir mal bei folgendem Problem unter die Arme greifen:
Mit bedienen einer Checkbox soll ein Div sichbar werden.
Wenn nun eine weitere Checbox angeklickt wird, soll ein evtl. sichtbares Div wieder verschwinden und ein neues Div angezeigt werden.
Ich kenne mich mit Javascript leider nur sehr wenig aus und auf mein in meinen alten Dickkopf passt kaum noch was rein ;)
Ich habe es jetzt mal wie folgt versucht, dabei wird jedoch ein bereits sichtbares Div nicht wieder auf 'none' gesetzt. Ihr Profis könnt das doch bestimmt auf einen Blick lösen.
Vielen Dank Euch
<script type="text/javascript">
function box1(chk)
{
var fs = document.getElementById('box1_' + chk.id);
fs.style.display = (chk.checked) ? '' : 'none';
var fs = document.getElementById('box2_' + chk.id);
fs.style.display = 'none';
}
function box2(chk)
{
var fs = document.getElementById('box2_' + chk.id);
fs.style.display = (chk.checked) ? '' : 'none';
var fs = document.getElementById('box1_' + chk.id);
fs.style.display = 'none';
}
</script>
<input type="checkbox" id="a" name="box_1" onclick="box1(this);"> BOX_1
<br><br>
<input type="checkbox" id="b" name="box_2" onclick="box2(this);"> BOX_2
<div id="box1_a" style="display:none;background:red;width:100px;height:100px;">Dieses ist Box 1</div>
<div id="box2_b" style="display:none;background:green;width:100px;height:100px;">Dieses ist Box 2</div>
-
Hallo Forum,
Ihr müsst mir mal bei folgendem Problem unter die Arme greifen:
Nette Art der Fragestellung.
Ich hoffe, ich werde als Rentner anders sein. ;-)-
Sorry,
dann BITTE Euch mir mal unter die Arme zu greifen - ist eine doofe Floskel, dafür endschuldige ich mich.
Ich komme da echt nicht weiter.
-
-
@@Wolfgang (Rentner):
nuqneH
Mit bedienen einer Checkbox soll ein Div sichbar werden.
Wenn nun eine weitere Checbox angeklickt wird, soll ein evtl. sichtbares Div wieder verschwinden und ein neues Div angezeigt werden.Es soll nur jeweils eine Box sichtbar sein? Und wenn einmal eine sichtbar gemacht wurde kein Zurück in den Anfangszustand (keine sichtbar) geben?
Dann sind nicht Checkboxen, sondern http://de.selfhtml.org/html/formulare/auswahl.htm#radiobuttons@title=Radio-Buttons die geeigneten UI-Elemente. Und deren Beschriftung sollte ein http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=Label sein, damit auch dies anclickbar ist. (Fitts’s law)
Per JavaScript sollten nicht Stile geändert werden, sondern „JavaScript ist wunderbar geeignet, die DOM-Objekte auf eine Weise zu verändern, die in CSS genutzt werden kann.“ [Cheatah]
Am besten einem gemeinsamen Vorfahrenelement der Boxen ('html' und 'body' bieten sich an) eine Klasse geben, die den aktuellen Zustand widerspiegelt:
<input type="radio" name="controls" id="control1" onclick="[code lang=javascript]document.body.className = 'state1';"/> <label for="control1">Box 1</label>
<input type="radio" name="controls" id="control2" onclick="document.body.className = 'state2';"/> <label for="control2">Box 2</label>
<div id="box1">Dieses ist Box 1.</div>
<div id="box2">Dieses ist Box 2.</div>[/code](Wenn 'body' außerdem noch andere Klassen hat, die nicht überschrieben werden dürfen, wird’s etwas komplizierter.)
Ich hab die IDs vereinfacht und die Inline-Styles (pfui!) entfernt. Sämtliche Stilangaben gehören ins Stylesheet. Per Nachfahrenselektor [CSS2 §5.5] werden die Boxen eingeblendet:
#box1, #box2 { display: none; width: 100px; height: 100px; } #box1 { background: red } #box2 { background: green } .state1 #box1, .state2 #box2 { display: block }Für moderne Browser ist allerdings gar kein JavaScript erforderlich. Die Boxen lassen sich als nachfolgende Geschwister gechecketer Radio-Buttons selektieren. [CSS3-SELECTORS §6.6.4.2, §8.3.2]:
#control1:checked~#box1, #control2:checked~#box2 { display: block }Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@Gunnar Bittersmann:
nuqneH
Ich wusste doch, ich hab was vergessen. Hallo Gunnar[tm]!
Genauso wie Stilangaben nicht inline in @style-Attribute gehören, gehören Eventhandler nicht inline in @on…-Attribute. Besser ist’s fein säuberlich getrennt: Inhalt/Struktur (HTML), Darstellung (CSS) und Verhalten (JavaScript):
<input type="radio" name="controls" id="control1"/> <label for="control1">Box 1</label> <input type="radio" name="controls" id="control2"/> <label for="control2">Box 2</label> <div id="box1">Dieses ist Box 1.</div> <div id="box2">Dieses ist Box 2.</div> <script type="text/javascript"> [code lang=javascript]document.getElementById("control1").onclick = function () { document.body.className = "state1"; }; document.getElementById("control2").onclick = function () { document.body.className = "state2"; };</script>[/code]
Das Script darf natürlich (ebenso wie das Stylesheet) auch in einer externen Datei stehen.
Die nächste Verbesserung wären nicht zwei Eventhandler, sondern Event-Delegation …
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@Gunnar Bittersmann:
nuqneH
Die nächste Verbesserung wären nicht zwei Eventhandler, sondern Event-Delegation …
Der Vollständigkeit halber (und um mir seit langem mal wieder selbst zu antworten): Das sähe dann so aus:
document.body.onclick = function (e) { var e = e || window.event; var target = e.target || e.srcElement; switch (target.id) { case "control1": this.className = "state1"; break; case "control2": this.className = "state2"; break; } };Schlag nach bei molily.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Gunnar,
könntest du mir mal erklären, warum das hier
document.body.onclick = function (e)
{
var e = e || window.event;
var target = e.target || e.srcElement;
switch (target.id)
{
case "control1": this.className = "state1"; break;
case "control2": this.className = "state2"; break;
}
};so viel effizienter sein soll, als das > ~~~javascript document.getElementById("control1").onclick = function () { document.body.className = "state1"; }; > document.getElementById("control2").onclick = function () { document.body.className = "state2"; };</script>[/code]
Gruß, Jürgen
-
-
-