@@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', …)`{:.language-js} verzichten. > ~~~js, bad > 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')`{:.language-js} im DOM, um darauf einen Eventhandler zu registrieren, in welchem du abermals `document.querySelector('#breite')`{:.language-js} 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']`{:.language-js}. Und auch das Raussuchen von `document.querySelector('#box')`{:.language-js} aus dem DOM sollte nur einmal erfolgen, also außerhalb der Eventhandlerfunktion. > `inputElement.value +'px'`{:.language-js} Ich finde `` `${inputElement.value}px` ``{:.language-js} 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!** {:@en} -- Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. ([@Grantscheam](https://twitter.com/Grantscheam/status/1247046064504537092))

@@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', …)`{:.language-js} verzichten. > ~~~js, bad > 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')`{:.language-js} im DOM, um darauf einen Eventhandler zu registrieren, in welchem du abermals `document.querySelector('#breite')`{:.language-js} 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']`{:.language-js}. > `inputElement.value +'px'`{:.language-js} Ich finde `` `${inputElement.value}px` ``{:.language-js} 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!** {:@en} -- Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. ([@Grantscheam](https://twitter.com/Grantscheam/status/1247046064504537092))