JavaScript running the wrong event listener function

Question

When I upload a file to the card2 html div, I would expect the FileUpload2 javascript function to run instead of FileUpload. But my output is running console.log("Hello"); instead of console.log("World"); indicating that the FileUpload function is called, not FileUpload2

var imgPreview = document.getElementById('img-preview');
var fileUpload = document.getElementById('file-upload');

var imgPreview2 = document.getElementById('img-preview2');
var fileUpload2 = document.getElementById('file-upload2');

fileUpload.addEventListener('change', function(event){
        var file = event.target.files[0];
        var formData = new FormData();
        formData.append('file', file);
        formData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET);
        axios({
            url: CLOUDINAY_URL,
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: formData
        }).then(function(res){
            console.log("Hello");
            console.log(res);
            imgPreview.src = res.data.secure_url;
        }).catch(function(err){
            console.log(err);
        });
    });

    fileUpload2.addEventListener('change', function(event){
        var file2 = event.target.files[0];
        var formData2 = new FormData();
        formData.append('file', file2);
        formData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET2);
        axios({
            url: CLOUDINAY_URL,
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: formData2
        }).then(function(res){
            console.log("World");
            console.log(res);
            imgPreview2.src = res.data.secure_url;
        }).catch(function(err){
            console.log(err);
        });
    });

<div class="card">
    <img  src="{{url_for('static', filename='css/images/mount2.png')}}" id="img-preview" />
    <label class="file-upload-container" for="file-upload">
        <input id="file-upload" type="file" style="display:none;">

    </label>
</div>
<div class="card2">
    <img  src="{{url_for('static', filename='css/images/mount2.png')}}" id="img-preview2" />
    <label class="file-upload-container2" for="file-upload">
        <input id="file-upload2" type="file" style="display:none;">

    </label>
</div>

dgeare · Accepted Answer · 2018-08-09 15:02:26Z

1

Change

<label class="file-upload-container2" for="file-upload">

to

<label class="file-upload-container2" for="file-upload2">

answered Aug 9, 2018 at 15:02

dgeare

2,6585 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript running the wrong event listener function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related