JavaScript代码在codepen上运行良好，但在fiddle上不起作用。不能'；我找不到

嗨，我是JavaScript新手，正在编写一些代码。问题是，相同的代码在codepen上运行良好，但在fiddle和我的页面上不起作用。我无法找到它为什么在codepen上工作而不是在小提琴上工作&发生了什么。我也在上面给出了我的代码笔url。请向我解释并帮助我解决这个问题

“严格使用”；
//瓦尔斯
var result=document.querySelector（“.result”），
img_result=document.querySelector（“.img result”），
img_w=document.querySelector（“.img-w”），
img_h=document.querySelector（“.img-h”），
选项=document.querySelector（“.options”），
保存=document.querySelector（“.save”），
裁剪=document.querySelector（“裁剪”），
dwn=document.querySelector（“.download”），
upload=document.querySelector（#文件输入”），
cropper=“”；
//关于更改显示带有裁剪选项的图像
upload.addEventListener（“更改”，函数（e）{
if（e.target.files.length）{
//启动文件读取器
var reader=new FileReader（）；
reader.onload=函数（e）{
如果（如目标结果）{
美元（“.modal”）.modal（“show”）；
//创建新图像
var img=document.createElement（“img”）；
img.id=“图像”；
img.src=e.target.result；
//前清理结果
result.innerHTML=“”；
//附加新图像
结果：依附儿童（img）；
//显示保存btn和选项
save.classList.remove（“隐藏”）；
options.classList.remove（“hide”）；
//初始裁剪器
收割机=新收割机（img）；
}
};
reader.readAsDataURL（e.target.files[0]）；
}
});
//点击保存
save.addEventListener（“单击”，函数（e）{
e、 预防默认值（）；
//将结果获取到数据uri
var imgSrc=crapper.getcrappedcanvas({
宽度：img_w.value//输入值
}).toDataURL（）；
//删除img的隐藏类
裁剪。类列表。删除（“隐藏”）；
img_result.classList.remove（“hide”）；
//显示裁剪的图像
cropped.src=imgSrc；
dwn.classList.remove（“隐藏”）；
dwn.download=“imagename.png”；
setAttribute（“href”，imgSrc）；
});
$（“.upload button”）。在（“单击”，函数（）{
$（“#文件输入”）.trigger（“单击”）；
});
i:悬停{
光标：指针；
}
.仪表板hme img{
最大高度：100%；
最大宽度：100%；
边界半径：50%；
宽度：100px；
高度：100px；
边框：1px实心#ccc；
}

更新

&时代；
模态头
关闭保存
您忘记了CSS文件
crapper.min.CSS

Codepen URL: https://codepen.io/pkprabu/pen/zmRqgZ

嗨！你能不能说得更具体一点，什么东西在JSFIDLE上不起作用？也许你没有在JSFIDLE页面和网站上加载crapper.js？是的，这是很多代码。如果你能告诉我什么不起作用，这将是非常有帮助的。我有一种预感，你可能没有选择在JSFIDLE中加载jQuery和其他外部库。。。你有你的小提琴的链接吗？@MukeshVerma-嗨，很抱歉耽搁了。我已经更新了我的代码。现在，我实际上想替换所选图像，以替换现有图像。
https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css