Verhalten von on...-Handlern in Forms

[Rolf B]

Hallo alle,

beim Nachbearbeiten der Wikiänderungen von heha bin ich auf ein Kuriosum gestoßen. Zumindest für mich war es eins.

<h1>Beispiel: math.cbrt (Kubikwurzel)</h1>
<main>
	<p>Bitte geben Sie eine Zahl ein und drücken Sie auf den Button.</p>
	<form name="Test">
		<input type="text" value="9" name="Eingabe">
		<input type="button" value="=" onclick="Berechnen(Eingabe)"> </form>
	<p id="Ausgabe"></p>
</main>

onclick="Berechnen(Eingabe)"

WTF? Eingabe ist keine id, sondern ein Name. Es ist damit nicht unter window.Eingabe zu finden (zur Kontrolle ausprobiert). Unter document.Eingabe auch nicht. document.Test.Eingabe ist was anderes, das funktioniert, und das ist auch zu erwarten.

Aber einfach nur Eingabe⁉️ Und das funktioniert auch noch⁉️⁉️ Was ist denn das für ein Sonderscope beim Verarbeiten von on-Handlern⁉️⁉️‼️

Ist die Scope-Chain, die hier unter Punkt 9 aufgebaut wird, des Rätsels Lösung?

Ich weiß, wir empfehlen im Wiki, addEventListener zu verwenden. Da ist das kein Thema. Aber muss man solche Geheimnisse nicht auch irgendwo dokumentieren? Und sei es nur, um vor solchen Scope-Verwirrungen zu warnen? Das ist ja eine ganze Horde von impliziten with-Anweisungen (brrrrr), die dahinter lauert.

Das Beispiel bau ich erstmal um!

Rolf

[Raketenwilli]

Hallo alle,

beim Nachbearbeiten der Wikiänderungen von heha bin ich auf ein Kuriosum gestoßen. Zumindest für mich war es eins.

<h1>Beispiel: math.cbrt (Kubikwurzel)</h1>
<main>
	<p>Bitte geben Sie eine Zahl ein und drücken Sie auf den Button.</p>
	<form name="Test">
		<input type="text" value="9" name="Eingabe">
		<input type="button" value="=" onclick="Berechnen(Eingabe)"> </form>
	<p id="Ausgabe"></p>
</main>

onclick="Berechnen(Eingabe)"

WTF? Eingabe ist keine id, sondern ein Name. Es ist damit nicht unter window.Eingabe zu finden (zur Kontrolle ausprobiert). Unter document.Eingabe auch nicht. document.Test.Eingabe ist was anderes, das funktioniert, und das ist auch zu erwarten.

Aber einfach nur Eingabe⁉️

Naja. Der Typ mit dem Arbeitskittel (es gibt davon viele in jedem Computer), der die Aufgaben des Programmierers oder Bedieners bekanntlich erledigt, wuselt gerade im Formular und direkt neben ihm glänzt der Input mit dem Name „Eingabe“. Das dessen Value gemeint ist wird wohl mangels einer anderen Bestimmung als Default angenommen.

Wir haben also:

document.forms[#n]. elements['Eingabe'] .value

oder:

Kontext . Adresse . Vermutung

Ich würde das (schon wegen der Verschiebbarkeit, also Wiederverwendungsfähigkeit und Verständlichkeit des Codes) weder so machen noch so vorsehen - aber wenn man an etwas wie „relative Pfade“ denkt, ist es logisch. Denn ohne solche relativen Angaben müsste man eigentlich stets vom Browser über das Fenster und Dokument, Formular zum Inputfeld (oder via ID, was hinsichtlich der Erfordernis einer eineindeutigen Vergabe eigene Probleme aufwerfen kann) adressieren.

Sagen wir, es dient der Zugänglichkeit. Was dem einem „das Hirn wegknallt“ macht es anderen einfach. Aber nur bis es ihm oder ihr „das Hirn wegknallt“

[Raketenwilli]

Naja. Der Typ mit dem Arbeitskittel (es gibt davon viele in jedem Computer), der die Aufgaben des Programmierers oder Bedieners bekanntlich erledigt, wuselt gerade im Formular und direkt neben ihm glänzt der Input mit dem Name „Eingabe“. Das dessen Value gemeint ist wird wohl mangels einer anderen Bestimmung als Default angenommen.

Das dessen Value gemeint ist wird wohl mangels einer anderen Bestimmung als Default angenommen.

Hab mich gerade davon überzeugt: ThomasM hat Recht.

Vorliegend müsste also entweder Eingabe.value an die Funktion "Berechne" übergeben werden - was Sinn ergäbe

function Berechne( val ) { return val * 2; }

oder aber in der Funktion namens "Berechne"(sic!) statt eines direkten Wertes erst noch die erwartete Zahl geholt werden:

function Berechne( objekt ) { return objekt.value * 2; } 

Im Hinblick auf den Funktionsname, wäre die 2. Variante nicht mein Kandidat.

Weitere Kritik: Die Funktion soll den Wert ja auch gleich eintragen.

wäre da nicht ETWAS WIE ...

<html>
<h1>Beispiel:</h1>
<main>
	<p>Bitte geben Sie eine Zahl ein und drücken Sie auf den Button.</p>
	<form name="Test">
		<input type="number" value="9" name="Eingabe">
		<input type="button" value="="
		 onclick="
		    document.getElementById('Ausgabe').innerHTML = Eingabe.value * 2;
		">
	</form>
	<p>Ausgabe: <output id="Ausgabe"></output></p>
</main>
</html>

... oder gar ...

<html>
<h1>Beispiel:</h1>
<main>
	<p>Bitte geben Sie eine Zahl ein und drücken Sie auf den Button.</p>
	<form name="Test">
		<input type="number" value="9" name="Eingabe">
		<input type="button" value="=" onclick="
		    Ausgabe.innerHTML = Eingabe.value * 2;
		">
	</form>
	<p>Ausgabe: <output id="Ausgabe"></output></p>
</main>
</html>

... angebrachter?

[ThomasM]

Hallo Rolf,

onclick="Berechnen(Eingabe)"

WTF? Eingabe ist keine id, sondern ein Name. Es ist damit nicht unter window.Eingabe zu finden (zur Kontrolle ausprobiert). Unter document.Eingabe auch nicht. document.Test.Eingabe ist was anderes, das funktioniert, und das ist auch zu erwarten.

Hier wird offenbar Eingabe als Kurzfassung von this.form.Eingabe übergeben, der Wert aber noch nicht. Den müsste man dann in der Funktion Berechnen(arg) als arg.value abfragen.

Grüße,
Thomas

[Rolf B]

Hallo Thomas,

ja klar, übergeben wird das HTMLInputElement und den value muss man erstmal rausholen. Das war auch nicht meine Frage, das war auch so im Beispiel drin.

Was mich halt perplex gemacht hat, ist, dass dieser "Shortcut" überhaupt möglich ist, und dass das wohl sogar gespecct ist.

Rolf