Matthias Scharwies: Slider der Größe einer Box verändert

Beitrag lesen

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:

<!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

  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 in Mannheim