Good evening family. So I'm trying to write a JS script which does two things, firstly it alerts the users when the top button is clicked (\*button), and secondly it's suppose to be able to download a file that the users uploads to the browser (\*download) (nothing to do with a server so far).
The problem I encounter is that if the second part is commented out, the \*button part works fine, but when it is not nothing works.
Help would be much appreciated.
JS

```
 // HOME BUTTON
document.querySelector("#home").addEventListener('click', ()=>{
    alert("YESSIR!!!");
});

const up-file= document.querySelector("#file");
const dl-link= document.querySelector("#dl-link");
let objectURL;
// DOWNLOAD
up-file.addEventListener('change', ()=>{
    if(objectURL){
        URL.revokeObjectURL(objectURL);
    }
    const file= this.files[0];
    objectURL= URL.createObjectURL(file);
    dl-link.href= objectURL;
    dl-link.click();
});

```

HTML

```
<button id= "home">HOME</button>
<!-- DL-->
<label>Upload</label>
<input type= "file" id= "file"/>
<a id= "dl-link" download></a>

```

Thank you in advance.