[SOLUCIONADO] Atributo css no se asigna

[kenproxd]

Hola, necesito hacer un formulario en el que, al ingresar un número y dar clic en un botón, dicho número se le agregue como margin-top a un div en especifico. Lo he hecho de la siguiente manera:

Código HTML:

<input type="number" id="distancia" name="distancia" placeholder="Distancia...">
<button id="calcular">Calcular</button>
 

Código Javascript:

$('#calcular').on('click',function(){
    var distancia = $('#distancia').val();
    console.log(distancia);
    $('.globo').css('margin-top',+ distancia + ' px');
});
 

Con el console.log he comprobado que la variable distancia si esta obteniendo el valor del campo, sin embargo no se le agrega como atributo al div .globo. Tampoco sale ningún error en la consola.

He probado cambiar la ultima línea por:

$('.globo').css('margin-top','50 px');

y de esa manera sí funciona pero como ya expliqué al inicio, necesito que el margin sea el ingresado por el usuario en el input.

Espero puedan ayudarme

[Osvaldo_Jacobo]

creo que te sobra un + en tu codigo

Código Javascript:

$('.globo').css('margin-top', distancia + ' px');
 

pruebalo asi haber si te funciona

[AngelKrak]

para que Funcione es como te dijo osvaldo ;)

Seria algo asi:

Código Javascript:

'margin-top', distancia + 'px'
 

Asignas al css, que Baje X Pixeles, Asignas la Variable Distancia(para que recoja el valor del input) y le sumas el + para especificar que 'px' sea el texto después de la Variable.

Un Ejemplo(Puedes dejarlo asi, pero no se movera por que no le estas asignando que quieres que baje(Pixeles, Porcentajes, etc..)

Código Javascript:

'margin-top', distancia
 

Ahi te dejo un Ejemplo con Pixeles y Porcentajes:

Demo:
http://codepen.io/AngelKrak/pen/bENgWO

Código HTML:

<div class="uno">
<input type="number" id="distancia" name="distancia" placeholder="Distancia...">
<button id="calcular">Calcular</button>
<div class="globo">Se ha Movido <span></span></div>
</div>
 
<div class="dos">
<input type="number" id="distancia2" name="distancia" placeholder="Distancia...">
<button id="calcular2">Calcular</button>
<div class="globo2">Se ha Movido <span></span></div>
</div>
 

Código Javascript:

//Con Pixeles
$('#calcular').click(function() {
  var distancia = $('#distancia').val();
  $(".globo span").text(distancia + "px");
  $('.globo').css('margin-top', distancia + 'px');
});
 
//Con Porcentajes
$('#calcular2').click(function() {
  var distancia2 = $('#distancia2').val();
  $(".globo2 span").text(distancia2 + "%");
  $('.globo2').css('margin-top', distancia2 + '%');
});
 

[kenproxd]

Muchas gracias a ambos, el problema era justamente eso.