JavaScript Variable mit Schieberegler anpassen?
Hallo,
ich programmiere zur Zeit mit Canvas ein kleines Spiel für die Schule. Allerdings gibt es da ein kleines Problem.
Ich möchte gerne die Geschwindigkeit des Spieler individuell mit Hilfe eines range input-Elements verändern. Allerdings bekomme ich es nicht hin, den Output erfolgreich der Variable zuzuordnen.
Hier der Code:
<body>
<canvas id="canvas" width="600" height="400" tabindex="1"></canvas>
<div class="slidecontainer">
<input type="range" min="1" max="10" value="5" class="slider" id="gs" onchange="input(this.value);">
</div>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var score = 0;
// Spieler Werte
var x = 50;
var y = 100;
var speed = 6;
var sideLength = 50;
</script>
</body>
1 Antwort
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, programmieren, JavaScript
Ich sehe nicht, wo du input definiert hast.
So kannst du auf Änderungen des Elements reagieren:
<input type="range" min="1" max="10" value="5" class="slider" id="gs">
<script>
const slider = document.getElementById("gs");
var value = slider.value; // set initial state
slider.addEventListener("input", function(e) {
value = slider.value;
});
</script>
Die Variable value wird folgend immer den Wert bekommen, den auch der Slider anzeigt.