Slider der Größe einer Box verändert bearbeitet von Matthias Scharwies 15.04.2020 17:15 Servus! Ich habe Dein HTML übernommen, aber den `div id="wrapper` und die `<br>`s entfernt. Die sind im CSS mit `label {display: block;}` anders (eleganter) gelöst. Das JavaScript habe ich in den head kopiert; zum Testen würde ich keine externen Skripte verwenden: ~~~ HTML <!DOCTYPE HTML> <html> <head> <title>Formulare mit Slider</title> <meta charset="utf-8"/> <script> 'use strict'; 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'; }; </script> <style> #box { width: 100px; height: 100px; border: 1px solid; background: yellow; } label {display: block;} </style> </head> <body> <form id="form"> <fieldset> <legend>Slider für eine Box</legend> <label for="breite">Breite</label> <input type="range" name="breite" id="breite" value="50" min="0" max="200"> <label for="hoehe">Höhe</label> <input type="range" name="hoehe" id="hoehe" value="0" min="0" max="100"> <div id="box"></div> </fieldset> </form> </body> </html> ~~~ Genau wie @Rolf B [frage ich mich, was das für eine Aufgabe ist.](https://forum.selfhtml.org/self/2020/apr/14/slider-der-grosse-einer-box-verandert/1768989#m1768989) Entweder habt ihr Java**Script** schon behandelt, dann ist die Aufgabe machbar oder irgendetwas passt nicht. Ich weiß, dass es viel Online-Unterricht gibt, der evtl. mit Erklärungen nicht hinterher kommt. Es wäre nett, wenn Du uns (mir) hier mehr Informationen geben könnte. Nun zum Code: In der 1. Zeile wird das Script nach dem Laden des Dokuments ausgeführt. Der Slider erhält einen Event-Llistener, der bei jedem `input`-Event feuert und die Funktion `scaleAbmessungen`aufruft. Diese Funktion holt sich die box und das inputElement als Variablen und liest den Wert (`value`) des Sliders aus. `box.style.width = inputElement.value +'px';` Jetzt wird der Wert mit dem String `px` verbunden und der Style-Eigenschaft width zugewiesen. **[EDIT]** alle HTML-Tags, die du aufmchst, musst du auch wieder schließen; ich habe das schließende `</form>`ergänzt. **[/EDIT]** **Aufgabe an dich:** Ändere das Script so, dass 1. das input-Event bei einer Eingabe ins Formular „feuert“ 2. auch der hoehe-Regler abgefragt und entsprechend die Höhe verändert wird. Herzliche Grüße Matthias Scharwies -- 25 Jahre SELFHTML → **neuer Termin!** → **[SELF-Treffen 09.-11. Oktober 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**
Slider der Größe einer Box verändert bearbeitet von Matthias Scharwies 15.04.2020 17:26 Servus! Ich habe Dein HTML übernommen, aber den `div id="wrapper` und die `<br>`s entfernt. Die sind im CSS mit `label {display: block;}` anders (eleganter) gelöst. Das JavaScript habe ich in den head kopiert; zum Testen würde ich keine externen Skripte verwenden: ~~~ HTML <!DOCTYPE HTML> <html> <head> <title>Formulare mit Slider</title> <meta charset="utf-8"/> <link href="CSS.css" rel="stylesheet" type="text/css"/> <script> 'use strict'; 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'; }; </script> <style> #box { width: 100px; height: 100px; border: 1px solid; background: yellow; } label {display: block;} </style> </head> <body> <form id="form"> <fieldset> <legend>Slider für eine Box</legend> <label for="breite">Breite</label> <input type="range" name="breite" id="breite" value="50" min="0" max="200"> <label for="hoehe">Höhe</label> <input type="range" name="hoehe" id="hoehe" value="0" min="0" max="100"> <div id="box"></div> </fieldset> </body> </html> ~~~ Genau wie @Rolf B [frage ich mich, was das für eine Aufgabe ist.](https://forum.selfhtml.org/self/2020/apr/14/slider-der-grosse-einer-box-verandert/1768989#m1768989) Entweder habt ihr Java**Script** schon behandelt, dann ist die Aufgabe machbar oder irgendetwas passt nicht. Ich weiß, dass es viel Online-Unterricht gibt, der evtl. mit Erklärungen nicht hinterher kommt. Es wäre nett, wenn Du uns (mir) hier mehr Informationen geben könnte. Nun zum Code: In der 1. Zeile wird das Script nach dem Laden des Dokuments ausgeführt. Der Slider erhält einen Event-Llistener, der bei jedem `input`-Event feuert und die Funktion `scaleAbmessungen`aufruft. Diese Funktion holt sich die box und das inputElement als Variablen und liest den Wert (`value`) des Sliders aus. `box.style.width = inputElement.value +'px';` Jetzt wird der Wert mit dem String `px` verbunden und der Style-Eigenschaft width zugewiesen. **Aufgabe an dich:** Ändere das Script so, dass 1. das input-Event bei einer Eingabe ins Formular „feuert“ 2. auch der hoehe-Regler abgefragt und entsprechend die Höhe verändert wird. Herzliche Grüße Matthias Scharwies -- 25 Jahre SELFHTML → **neuer Termin!** → **[SELF-Treffen 09.-11. Oktober 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**
Slider der Größe einer Box verändert bearbeitet von Matthias Scharwies 15.04.2020 17:17 Servus! Ich habe Dein HTML übernommen, aber den `div id="wrapper` und die `<br>`s entfernt. Die sind im CSS mit `label {display: block;}` anders (eleganter) gelöst. Das JavaScript habe ich in den head kopiert; zum Testen würde ich keine externen Skripte verwenden: ~~~ HTML <!DOCTYPE HTML> <html> <head> <title>Formulare mit Slider</title> <meta charset="utf-8"/> <link href="CSS.css" rel="stylesheet" type="text/css"/> <script> 'use strict'; 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'; }; </script> <style> #box { width: 100px; height: 100px; border: 1px solid; background: yellow; } </style> </head> <body> <form id="form"> <fieldset> <legend>Slider für eine Box</legend> <label for="breite">Breite</label> <input type="range" name="breite" id="breite" value="50" min="0" max="200"> <label for="hoehe">Höhe</label> <input type="range" name="hoehe" id="hoehe" value="0" min="0" max="100"> <div id="box"></div> </fieldset> </body> </html> ~~~ Genau wie @Rolf B [frage ich mich, was das für eine Aufgabe ist.](https://forum.selfhtml.org/self/2020/apr/14/slider-der-grosse-einer-box-verandert/1768989#m1768989) Entweder habt ihr Java**Script** schon behandelt, dann ist die Aufgabe machbar oder irgendetwas passt nicht. Ich weiß, dass es viel Online-Unterricht gibt, der evtl. mit Erklärungen nicht hinterher kommt. Es wäre nett, wenn Du uns (mir) hier mehr Informationen geben könnte. Nun zum Code: In der 1. Zeile wird das Script nach dem Laden des Dokuments ausgeführt. Der Slider erhält einen Event-Llistener, der bei jedem `input`-Event feuert und die Funktion `scaleAbmessungen`aufruft. Diese Funktion holt sich die box und das inputElement als Variablen und liest den Wert (`value`) des Sliders aus. `box.style.width = inputElement.value +'px';` Jetzt wird der Wert mit dem String `px` verbunden und der Style-Eigenschaft width zugewiesen. **Aufgabe an dich:** Ändere das Script so, dass 1. das input-Event bei einer Eingabe ins Formular „feuert“ 2. auch der hoehe-Regler abgefragt und entsprechend die Höhe verändert wird. Herzliche Grüße Matthias Scharwies -- 25 Jahre SELFHTML → **neuer Termin!** → **[SELF-Treffen 09.-11. Oktober 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**
nicht angemeldet
