Javascript file in conflict with other javascript

Question

I think my javascript in my php file is in conflict with my javascript file. I have a script that checks of the image is smaller then 2MB and a script that shows the image you selected in a small version. But the second part does not work when the first script is active. how do I fix this?

script in HTML

<script> 
window.onload = function() {
    var uploadField = document.getElementById("frontImages");
    uploadField.onchange = function() {
        if(this.files[0].size > 2000000){
        alert("File is too big!");
        this.value = "";
        };
    };
    var uploadField = document.getElementById("itemImages");

    uploadField.onchange = function() {
        if(this.files[0].size > 200){
        alert("File is too big!");
        this.value = "";
        };
    };
}
</script>

.js file

$("#frontImages").change(function () {
if ($('#frontImages').get(0).files.length > 0) {
    $('#frontImages').css('background-color', '#5cb85c');
} else {
    $('#frontImages').css('background-color', '#d9534f');
}
});

$("#itemImages").change(function () {
if ($('#itemImages').get(0).files.length > 0) {
    $('#itemImages').css('background-color', '#5cb85c');
} else {
    $('#itemImages').css('background-color', '#d9534f');
}
});

document.getElementById("frontImages").onchange = function () {
var x = document.getElementById('previewFrontImage');
x.style.display = 'block';
var reader = new FileReader();
reader.onload = function (e) {
    document.getElementById("previewFrontImage").src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
};

function previewImages() {
var $preview = $('#previewItemImages').empty();
if (this.files) $.each(this.files, readAndPreview);

function readAndPreview(i, file) {
    var reader = new FileReader();
    $(reader).on("load", function () {
        $preview.append($("<img/>", {src: this.result, height: 100}));
    });
    reader.readAsDataURL(file);
}

}

$('#itemImages').on("change", previewImages);

I'm guessing that the conflict is between the html script and this

document.getElementById("frontImages").onchange = function () 

I also have a question how I can fix that there will be no small image when the image is too big

Answer 1

Your guess is correct, onchange is simply member variable of various elements, and thus

var uploadField = document.getElementById("frontImages");
uploadField.onchange = function() {

and

document.getElementById("frontImages").onchange = function ()

are setting this single variable (of frontImages ), which will store one callback function at a time.

You could use addEventListener() instead, which maintains a list of event listeners, so there can be more than one. Modifying the lines to

var uploadField = document.getElementById("frontImages");
uploadField.addEventListener("change", function() {

and

document.getElementById("frontImages").addEventListener("change", function ()

will register both event listeners on frontImages , regardless of the order they are executed.

Side remark: when you have "nice" id s, document.getElementById() can be omitted, as elements with id s become variables (of window which is the global scope), and thus you could write frontImages.addEventListener(...) . You still need the getter in various cases, like when a local variable shadows the id , or when it is not usable as variable identifier (like id="my-favourite-id" or id="Hello World" )