Why isn't my JQuery/CSS code working when I import it into my Wordpress website?
Question
When editing the code on JSFiddle, everything works as it should but when I import it into my live Wordpress site, it doesn't do anything at all. I've triple checked that I haven't made any typos or anything like that but there really isn't anything that stands out to me. Getting super frustrated so I'm hoping someone out there can help.
Thanks in advance :)
Live site: https://victoryposters.com/product/stadium/
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'); } }; img.src = _URL.createObjectURL(file); } });
.pass { display: none; } .fail { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <input type="file" id="filecheck" /> <div class="fail">File quality is very low we can not accept this image</div> <div class="pass">file quality is high</div>
1 answers
solution1
0 2019-03-22 07:46:23
The issue is that you put your JavaScript inside the <head> tag. This means it tries to execute your code before it even encounters your DOM (HTML elements you try to query). So it tries to execute it on something which does not exist at that moment of time. Either wrap your entire code into
$(document).ready(function() { … })
or even better, put it before the closing <body> tag. In any case, I also suggest to move it to an external file
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.