Slider der Größe einer Box verändert

[Gunnar Bittersmann]

@@Matthias Scharwies

Das JavaScript habe ich in den head kopiert

Am Ende des body wäre es besser aufgehoben. Dann kannst du auch auf document.addEventListener('DOMContentLoaded', …) verzichten.

document.addEventListener('DOMContentLoaded', function () {
	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';
};   

Du suchst dir document.querySelector('#breite') im DOM, um darauf einen Eventhandler zu registrieren, in welchem du abermals document.querySelector('#breite') im DOM suchst? Das ergibt so gar keinen Sinn.

Es macht sowieso keinen Sinn, das Eingabeelement im DOM zu suchen. Schließlich hat man bereits eine Referenz darauf: document.forms['form'].elements['breite'].

Und auch das Raussuchen von document.querySelector('#box') aus dem DOM sollte nur einmal erfolgen, also außerhalb der Eventhandlerfunktion.

inputElement.value +'px'

Ich finde `${inputElement.value}px` besser lesbaren Code.

Aufgabe an dich:

Ändere das Script so, dass

1. das input-Event bei einer Eingabe ins Formular „feuert“

Die Aufgabe ist Linus’ Kenntnisstand völlig unangemessen.

2. auch der hoehe-Regler abgefragt und entsprechend die Höhe verändert wird.

Das sollte mit C&P machbar sein.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!