javascript - I'm attempting to change an image's source (and therefore display) when a right arrow is clicked. However, the image becomes "undefined" -

//images used.   var imagedata = "https://i.vimeocdn.com/video/246976999_640.jpg" var imagedata1 = "ahr0cdovl2z1bnrpbwvzbmv3cy5jb20vd3aty29udgvudc91cgxvywrzlziwmtuvmdcvu2vhluj1bm5pzxmtqxjlluxhdgvzdc1dcmf6zs1jbi1kyxbhbi1gb3itqxf1yxjpdw0tvgfua3mtms5qcgc="; var imagedata2 = "http://celebratewomantoday.com/wp-content/uploads/2015/03/chirpy-duckling-sitting-on-box-3.jpg"; var imagedata3 = "http://www.name-list.net/img/portrait/hamster_3.jpg"; var imagedata4 = "http://3.bp.blogspot.com/-4fgnh3widte/th7-yf2w8qi/aaaaaaaaarm/2zr1zx6wwe4/s1600/puffer+fish.jpg";  //array containing images can iterated  var allimages = [imagedata, imagedata1, imagedata2, imagedata3, imagedata4]; var count = 1;  $("#right").click(function() {   if (count < 5){   document.getelementbyid("hello").src = allimages[count];   count++;   } });  var image = new image();   var can = document.createelement('canvas'); var ctx = can.getcontext('2d');  can.height = 63; can.width = 80;  previewdataurl = document.getelementbyid("hello").src;  image.onload = function() {     ctx.drawimage(this, 0, 0, 80, 63);     //new cropped image's base64      document.getelementbyid("normalpic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("vintagepic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("lomopic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("claritypic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("sincitypic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("sunrisepic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("crossprocesspic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("orangepeelpic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("lovepic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("grungypic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("jarquespic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("pinholepic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("oldbootpic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("glowingsunpic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("hazydayspic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("hermajestypic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("nostalgiapic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("hemingwaypic").src = can.todataurl("image/jpeg", 0.5);     document.getelementbyid("concentratepic").src = can.todataurl("image/jpeg", 0.5); }; image.src = document.getelementbyid("hello").src ; 

so i'm trying accomplish here when user clicks right button, next photo in array displayed.

i've added console.log(document.getelementbyid("hello").src) before in right click function see if source of "hello" changing , was. i've added console.log(document.getelementbyid("hello").src) after image.onload function , receive "undefined". doing wrong here?

this image base64 image, using should add data type:

var imagedata1 = "data:image/jpeg;base64,ahr0cdovl2z1bnrpbwvzbmv3cy5jb20vd3aty29udgvudc91cgxvywrzlziwmtuvmdcvu2vhluj1bm5pzxmtqxjlluxhdgvzdc1dcmf6zs1jbi1kyxbhbi1gb3itqxf1yxjpdw0tvgfua3mtms5qcgc="; 

https://en.wikipedia.org/wiki/data_uri_scheme