Javascript 为什么codepen为我编写的过滤代码工作，而不是SublimiteText3或visual studio？

我是新来的，正在学习HTML CSS和Javascript。我刚开始开发这个过滤web应用程序进行实践。当我尝试使用sublime文本或visual studio时，Javascript部分实际上不起作用。我试图把正确的路径和其他东西，但它>没有显示任何图片上传到画布上，但如果我复制粘贴在codepen.io这段代码，它的工作很好！我不知道发生了什么，因为我只是个新手。如果有人能给我一个恰当的解释，我将不胜感激。谢谢

这是我的HTML CSS和JS代码：

let fileInput=document.getElementById（“mainup”）；
fileInput.addEventListener（“更改”，函数（ev）{
if（ev.target.files）{
让file=ev.target.files[0]；
var reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onloadend=函数（e）{
var image=新图像（）；
image.src=e.target.result；
image.onload=功能（ev）{
var canvas=document.getElementById（“can1”）；
canvas.width=image.width；
canvas.height=image.height；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（图像，0,0）；
};
};
}
});

菲塔罗
//因为我的js文件名是filter.js
菲塔罗
欢迎来到Filtaro！



用不同的过滤器过滤你的图像。质量不会下降！玩得高兴
!



上传图片
下载
链接标记应位于头部和脚本标记内，正好在正文结束标记之前，以防止解析器阻塞；script标记不需要type属性，//不是您在HTML中进行注释的方式，使用
标记被认为是一种不好的做法。谢谢您的建议。我会记住这一点。如果将代码嵌入HTML，会发生什么？我的意思是，如果你把所有的javascript放在脚本标签之间呢？在CodePen中，它可以工作，因为它会自动链接所有文件。你的js链接似乎有问题。我也试过了（我的意思是我把所有的js都放在脚本标记之间），但也不起作用。你如何从浏览器访问文件？控制台显示任何警告？链接标记应位于头部和脚本标记内，正好在正文结束标记之前，以防止解析器阻塞；script标记不需要type属性，//不是您在HTML中进行注释的方式，使用
标记被认为是一种不好的做法。谢谢您的建议。我会记住这一点。如果将代码嵌入HTML，会发生什么？我的意思是，如果你把所有的javascript放在脚本标签之间呢？在CodePen中，它可以工作，因为它会自动链接所有文件。你的js链接似乎有问题。我也试过了（我的意思是我把所有的js都放在脚本标记之间），但也不起作用。你如何从浏览器访问文件？控制台显示任何警告？