How to fix Cannot set properties of null (setting 'innerHTML') at HTMLInputElement.loader-CodePudding

Can someone please help with this code I know that everything is correct but it still doesn't work for some reason if you read the title it gives me that error when I try to use it. I tried to modify my code multiple times but it still doesn't work if you guys have any ideas on how to fix it please help me. Thank you:)

let loader = function(e) {
  let file = e.target.files;

  let show = "Selected File: "   file[0].name;

  let output = document.getElementById("selector");
  output.innerHTML = show;
  output.classList.add("active");
};

let fileInput = document.getElementById("file");
fileInput.addEventListener('change', loader);

<input type="file" accept="video/* image/*" multiple name="" id="selector" hidden>
<label for="file"  id "selector"> Select a file: </label>

CodePudding user response：

first, typo issue: id = "selector" in the <label> (missing "=") like the example below to select a file:

<input type="file" id="file-selector" multiple>
<script>
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  });
</script>

Code above displays the name of the file selected next to the button:

to limit the file types:

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">