AW: Input mit JS ausgrauen
hi
ich bin immer zu spät... ich kündige
diese ergänzung ist etwas off-topic aber informativ
du könntest hier einige optimierungen angehen, je nach anforderungen/wünschen mehr oder weniger. ich liste sie mal anhand ihres kosten/nutzen verhältnisses geordnet auf, wobei diese unterscheidung teils aufgrund von allg. gründen beeinflusst wird.
1)
das textfeld das ausgegraut/-geschaltet werden soll nur einmal im DOM suchen. jedes durchwandern des DOMs kostet viel zeit (in javascript verhältnissen gesprochen und abhängig von der browser eigenen javascript-engine). zudem hat es den großen vorteil, dass dein code einfacher zu lesen ist - was im zweifelsfall ein "totschlag"-argument ist:
PHP:
function enable_disable () {
var togglee = document.getElementById('test_input');
if (togglee.disabled == true) {
togglee.disabled = false;
} else {
togglee.disabled = true;
}
}
2)
struktur und logik voneinander trennen. dazu dürftest du den "onchange"-listener:
HTML:
<input ... onchange="enable_disable()">
nicht mehr als eigenschaft des elements definieren. du setzt diesen dann innerhalb des javascript-codes bzw. lässt ihn von javascript setzen:
PHP:
document.body.onload = function () {
var togglePairing = document.getElementsByTagName('input');
togglePairing[1].onchange = function () {
enable_disable(togglePairing[0]);
}
}
alle weiteren änderungen bringen dir keine wirklichen verbesserungen in bezug auf performance. sie führen "nur" zu schöner zu lesendem code. es wäre also absolut in ordnung, an dieser stelle zu stoppen.
... oh, du liest weiter! :rot:
ok, ab jetzt beginnt ein prozess, der am ende dazu führt, dass dein code so ausschaut:
PHP:
document.body.onload = function () {
var togglePairing = document.getElementsByTagName('input');
togglePairing[1].onchange = enable_disable(togglePairing[0]);
}
3)
die function enable_disable könnte so umgebaut werden, dass sie ein übergebenes element ein-/ausschaltet. sie würde dann so ausschauen:
PHP:
function enable_disable (el) {
if (el.disabled == true) {
el.disabled = false;
} else {
el.disabled = true;
}
}
der vorteil wäre, dass du mit dieser function theoretisch jedes element "an" und "aus" schalten könntest.
zwar geht das nicht genau so wie sie jetzt implementiert ist, aber dazu komme ich gleich.
4)
um die lesbarkeit zu erhöhen, könnte das if-else-statement entfallen. du könntest dies tun, weil du eine eigenschaft einfach zwischen zwei gegensätzlichen zuständen wecheln lässt. vereinfacht gesagt: du schaltest eigentlich nur hin und her zwischen "an" und "aus":
PHP:
function enable_disable (el) {
el.disabled = (el.disabled == true ? false : true);
}
oder noch kürzer:
PHP:
function enable_disable (el) {
el.disabled = !el.disabled;
}
der erste fall innerhalb der klammern würde so übersetzt werden:
"wenn bedingung wahr ? dann : sonst"
während das ausrufezeichen im zweiten fall diese übersetzung hätte:
"gegenteil (von) diesem"
5)
wie in 3) gesagt, müsste man noch etwas tun, um das entgültige ergebnis zu bekommen und zu verhindern, dass das text-input feld sofort deaktiviert wird: die function enable_disable müsste ein function zurückgeben, die dann an den eventlistener gebunden ist. dazu muss enable_disable noch ein letztes mal modifiziert werden:
PHP:
function enable_disable (el) {
return function () {
el.disabled = !el.disabled;
}
}
und zack! schon ist alles in butter
es ginge zwar noch etwas besser, aber das sprengt warscheinlich diesen post. stichworte währen und
partial application.
gruß
