Jquery function

JavaScript
1

I have the following 8 functions

    function preview1(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
				$('#picupload1').hide();
				$('#preview1').show();
                $('#preview1').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    function preview2(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
				$('#picupload2').hide();
				$('#container2').show();
                $('#preview2').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }    
    function preview3(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
				$('#picupload3').hide();
				$('#container3').show();
                $('#preview3').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    function preview4(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
				$('#picupload4').hide();
				$('#container4').show();
                $('#preview4').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    } 
    function preview5(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
				$('#picupload5').hide();
				$('#container5').show();
                $('#preview5').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    function preview6(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
				$('#picupload6').hide();
				$('#container6').show();
                $('#preview6').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }    
    function preview7(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
				$('#picupload7').hide();
				$('#container7').show();
                $('#preview7').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    function preview8(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
				$('#picupload8').hide();
				$('#container8').show();
                $('#preview8').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }

Which im trying to make only 1, because the only difference is the number in divs id to

    function previewImage(x,input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
				$('#picupload'+x).hide();
				$('#container'+x).show();
                $('#preview'+x).attr('src', e.target.result);
				console.log("X: "+x);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }

but nothings happening, what am I doing wrong (I call the function like

    $("#Image1").change(function(){
        previewImage(1,this);
    });
2

Standard Triage.

Put breakpoints on your Calling line, the first line of your function, the first line of the inner function, the line before the readAsDataURL call, and the line after it. Track your variables (especially x).

3

[quote=“lurtnowski, post:1, topic:290088, full:true”]
but nothings happening, what am I doing wrong[/quote]

Does the browser console say what is going wrong?

4

breakpoints
in javascript what are they?
Its working now though

5

Try this Chrome Dev Tools course. It’s free, and it will show you how to set breakpoints on your front-end Javascript. This will help you find problems in your code.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.