Déplacer un bloc selon la position d'un input range.

Par Laznet, il y a 10 ans

Javascript

Bonjour,

Dans le but de faire bouger une div selon la position du curseur d'un input range, j'ai voulu modifier la position de la div selon la valeur récupéré depuis cet input.

J'ai écris ce code :

var x = getElementById('x').value; //Input range horizontal var y = getElementById('y').value; //Input range vertical var bloc = getElementById('block'); bloc.style.left = x + "px"; bloc.style.top = y + "px";

Mon problème c'est que la div ne bouge pas.

Est-ce qu'une fonction serait la solution ?

PS : Je suis extrêment débutant en JavaScript

Auriez-vous une solution ?

13 réponses

antho07, il y a 10 ans

Bonjour,
il faut écouter le changement de position du range et lancer en callback ton traitement.

Les évènement change et input te seront utiles

cordialement..

Laznet, il y a 10 ans

Merci, j'irais voir ça :D

Laznet, il y a 10 ans

Antho07 Quand tu parles d'événement change, tu parles bien de la fonction change de jQuery ?

Laznet, il y a 10 ans

Après quelque recherches sur l'event onchange, j'ai penser à un code, dites moi ce que vous en pensez :

HTML input type="range" id="x" onchange=fonction

JS
fonction(){
var x = GetElementsById("x").value;
}

Syntaxiquement parlant ce n'est peut être pas correct, mais la logique est-elle là ?
Suis-je dans la bonne direction pour continuer ?

otakodes, il y a 10 ans

oui c'est ça le principe mais du coup il faut que le reste du codé précédent soit dans la fonction aussi, cad : changer le top et le left

Laznet, il y a 10 ans

Ok merci :D

Laznet, il y a 10 ans

Je me suis tromper quelque part?

JS

function move(){ var x = getElementById('x').value; var y = getElementById('y').value; var bloc = getElementById('block'); bloc.style.left = x + "px"; bloc.style.top = y + "px"; }`

HTML

<html> <head> <link rel="stylesheet" type="text/css" href="css/style.css"> <title></title> <meta charset="UTF-8"> </head> <body> <form action="index.html"> <input type="range" id="x" onchange="move();"> <input type="range" id="y" onchange="move();"> </form> <div class="box"> <div id="block"> </div> </div> </body> <script type="text/javascript" src="js/app.js"></script> </html>
otakodes, il y a 10 ans

ta console javascrit aurait du te dire l'erreur mais là à vu d’œil je dirais que c'est parce que tu n'a pas mis : document.getElementById, tu as oublié le document.

drdoom, il y a 10 ans

Salut, oui tu as oublié le "document.".

Par contre je pense que c'est pas mal de séparer son HTML de son JS, regarde :
demo

Laznet, il y a 10 ans

@Drdoom, j'avais un doute sur la position des balises script dans l'HTML.
Merci de l'info :D

Laznet, il y a 10 ans

Existe-t-il une sorte de console.log mais qui affiche le résultat dans la page, au lieu d'afficher dans la console ?
Comme le fait var_dump en PHP.

otakodes, il y a 10 ans

non ça n'exsite pas après la solution la plus simple c'est fiare un alert ou mettre dans ta page JSON.stringify(tonObjetIci)

Laznet, il y a 10 ans

Merci à tous, mon code fonctionne parfaitement !