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 6 months ago
firstly ensure the 'change' event is being triggered by adding a console.log statement
BowersDev 6 months ago
Sorry, I'm actually not sure how to do that. Can you assist? Happy to increase the bounty if need be.
tmbo1980 6 months 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 6 months ago
now try this one: https://jsfiddle.net/LukeLucas/6ba3y802/4/ and if possible, move this to the footer of ur site
BowersDev 6 months ago
New code and is placed right before the closing tag. Doesn't work, unfortunately.
tmbo1980 6 months ago
u have put in an extra opening bracket at the beginning
BowersDev 6 months ago
There you go, I believe it's now working
BowersDev 6 months ago
Yes, it appears to be working now :) Thank you so much for your help!
tmbo1980 6 months ago
No worries. Please don’t forget to verify my answer
BowersDev 6 months ago
Just checking that it works in other browsers before verifying...
tmbo1980 6 months ago