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

Laznet
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

otakodes
Réponse acceptée

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

otakodes
Réponse acceptée

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
Réponse acceptée

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

antho07

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
Auteur

Merci, j'irais voir ça :D

Laznet
Auteur

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

Laznet
Auteur

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 ?

Laznet
Auteur

Ok merci :D

Laznet
Auteur

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>
Laznet
Auteur

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

Laznet
Auteur

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

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
Auteur

Merci à tous, mon code fonctionne parfaitement !