Slider der Größe einer Box verändert

[Matthias Scharwies]

Servus!

Hallo Gunnar,

nicht für die input-Elemente zu registrieren, sondern (...) fürs Formular

Dann hättest Du Recht, Bubbling wäre für Linus ein Schritt zu viel. Aber war das gemeint? Event und Eingabe bringe ich nicht so recht als Synonym übereinander. Matthias?

Du hattest anfangs geschrieben "Ich frage nicht ohne Grund: Hausaufgaben vorkauen, das tun wir hier nicht."

Ich hatte anfangs das HTML gelobt (mir waren die <br>s auch aufgefallen, das fehlende </form>aber nicht) und ihm ein Live-Beispiel und einen Link zum DOM-Tutorial geschickt.

• JavaScript/Tutorials/DOM

Nach Linus Dank (immerhin hat er sich für seine Frage sogar bei uns angemeldet) habe ich doch beschlossen, die Hausaufgabe (zumindest teilweise) zu lösen:

document.querySelector('#breite').addEventListener('input', scaleAbmessungen);
scaleAbmessungen();


function scaleAbmessungen() {
	var box = document.querySelector('#box');
	var inputElement = document.querySelector('#breite');
	box.style.width = inputElement.value +'px';
}; 

Damit kann Linus die Breite verändern. Mit Grundkenntnissen in JavaScript (und hier fangen die Spekulationen an) hätte er dieses Snippet verdoppeln können zu

document.querySelector('#hoehe').addEventListener('input', scaleHoehe);
scaleHoehe();


function scaleHoehe() {
	var box = document.querySelector('#box');
	var inputElement = document.querySelector('#hoehe');
	box.style.height = inputElement.value +'px';
}; 

Das wäre unschön gewesen, hätte dem DRY-Prinzip widersprochen, aber funktioniert.

Früher wäre alles einfacher gewesen:

<form id="form" oninput="scaleAbmessungen()">

Jetzt bleibt nur noch anstelle die beiden Schiebe-Regler zu belauschen, den input-Event auf das Formular zu legen. Ich weiß, dass dies nicht trivial ist, weiß aber eben auch nicht, was eigentlich die gestellte Aufgabe war, bzw. von welchem Kenntnisstand ausgegenangen werden muss.

Herzliche Grüße

Matthias Scharwies

PS: Übrigens, das 1. Live-Beispiel mit dem grayscale kam ursprünglich von Gunnar.