nicht angemeldet
Matthias ScharwiesServus!
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:
<!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.
Entweder habt ihr JavaScript 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 scaleAbmessungenaufruft.
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
- das input-Event bei einer Eingabe ins Formular „feuert“
- 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 in Mannheim
Gunnar Bittersmann
Der Martin
Matthias Apsel
Rolf B
Christian Kruse
JürgenB