Cambiar una imagen cuando se da entrada

Tengo un pequeño código html básico con JavaScript. Todo lo que quiero es que cuando escriba 3, me muestre una imagen como se especifica y para 9 en consecuencia. Esta es la demo. Visita http://jsbin.com/UVOFeGIG/1/edit

Está trabajando allí. No sé por qué JavaScript no funciona de esta manera. ¿Puede alguien resolver esto?

     var num2img = { "3":"visa", "9":"mastercard" }; $('#num').on('input', function(){ var val = this.value; if(val.length<=1){ var n = this.value.charAt(0); if(val && num2img[n]!==undefined){ $('#cardImage')[0].src = 'http://placehold.it/100x100/eee&text='+ num2img[n] +'.png'; }else{ $('#cardImage')[0].src = 'http://placehold.it/100x100/cf5'; } } });   Demo by Roko CB   

Prueba esto

 $(document).ready(function(){ var num2img = { "3":"visa", "9":"mastercard" }; $('#num').keyup(function(){ var val = this.value; if(val.length<=1){ var n = this.value.charAt(0); if(val && num2img[n]!==undefined){ $('#cardImage')[0].src = 'http://sofes.miximages.com/javascript/eee&text='+ num2img[n] +'.png'; }else{ $('#cardImage')[0].src = 'http://sofes.miximages.com/javascript/ you have not given any event $('.png'; }else{ $('#cardImage')[0].src = 'http://placehold.it/100x100/cf5'; } } }); }) 

Necesita cambiar $ (‘# cardImage’) [0] por $ (‘# cardImage’). Attr (‘src’, ‘ http://sofes.miximages.com/javascript/eee&text= ‘ + num2img [n] + ‘.png’); como # devolverá un elemento reemplazar. Ver el jsfiddle http://jsfiddle.net/mailtoshebin/dMWmw/

 var num2img = { "3":"visa", "9":"mastercard" }; $('#num').on('input', function(){ var val = this.value; if(val.length<=1){ var n = this.value.charAt(0); if(val && num2img[n]!==undefined){ $('#cardImage').attr('src' , 'http://sofes.miximages.com/javascript/eee&text='+ num2img[n] +'.png'); }else{ $('#cardImage')[0].src = 'http://placehold.it/100x100/cf5'; } } }); 

intente capturar el evento “presionar tecla” en el cuadro de entrada, http://api.jquery.com/keypress/ O intente capturar el evento “cambiar” en el cuadro de entrada, http://api.jquery.com/change/

Coloca el código de script dentro

 $(document).ready(function(){ //your code goes here }); 

y reemplazar

 $('#cardImage')[0].src = 'data/1357696142_mastercard1'+ num2img[n] +'.gif'; 

por

 $('#cardImage')[0].src = 'http://sofes.miximages.com/javascript/eee&text='+ num2img[n] +'.png';