Convert this JQuery script to vanilla Javascript
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Looking to have this fairly simple Jquery script converted to vanilla Javascript since JQuery isn't playing nice with my website. Good luck!

$(document).ready(function() {

var _URL = window.URL || window.webkitURL;

$("#filecheck").change(function() {
var file, img;

if ((file = this.files[0])) {
img = new Image();

img.onload = function() {
  //green
  if (this.width < 1800 && this.height < 1800) {
    $('.fail').css('display', 'block');
    $('.pass').css('display', 'none');
  } else {
    $('.pass').css('display', 'block');
    $('.fail').css('display', 'none');
    //$('form.cart').css('opacity', '1.0');
  }
};
img.src = _URL.createObjectURL(file);
}

});

})
awarded to BowersDev

Crowdsource coding tasks.

1 Solution


(function(){

    var _URL = window.URL || window.webkitURL;

    document.getElementById("filecheck").addEventListener("change", function(){

        var file, img;

        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function(){
                var passEl = document.getElementsByClassName('pass')[0];
                var failEl = document.getElementsByClassName('fail')[0];
                //green
                if (this.width < 1800 && this.height < 1800) {
                    failEl.style.display = "block";
                    passEl.style.display = "none";
                } else {
                    failEl.style.display = "none";
                    passEl.style.display = "block";
                    /* document.querySelector("form.cart").style.opacity = "1.0" */;
                }
            }
            img.src = _URL.createObjectURL(file);
        }
    });
})();
Thank you! However, when I replace the JQuery code, the function that should be performed is not happening (showing or hiding divs). See here: https://victoryposters.com/product/blaze/ Any reason why you think this is happening?
tmbo1980 15 days ago
firstly ensure the 'change' event is being triggered by adding a console.log statement
BowersDev 15 days ago
Sorry, I'm actually not sure how to do that. Can you assist? Happy to increase the bounty if need be.
tmbo1980 15 days ago
Yes please. And copy and paste the JS code from here and replace my original solution with this: https://jsfiddle.net/LukeLucas/6ba3y802/2/
BowersDev 15 days ago
now try this one: https://jsfiddle.net/LukeLucas/6ba3y802/4/ and if possible, move this to the footer of ur site
BowersDev 15 days ago
New code and is placed right before the closing tag. Doesn't work, unfortunately.
tmbo1980 15 days ago
u have put in an extra opening bracket at the beginning
BowersDev 15 days ago
There you go, I believe it's now working
BowersDev 15 days ago
Yes, it appears to be working now :) Thank you so much for your help!
tmbo1980 15 days ago
No worries. Please don’t forget to verify my answer
BowersDev 15 days ago
Just checking that it works in other browsers before verifying...
tmbo1980 15 days ago