Resolving the issue of "Cannot set properties of null (setting 'innerHTML') at HTMLInputElement.loader" involves identifying the root cause and implementing

Question

Resolving the issue of "Cannot set properties of null (setting 'innerHTML') at HTMLInputElement.loader" involves identifying the root cause and implementing

Need assistance with this code. Although I believe everything is correct, it still isn't working as expected. The error mentioned in the title comes up whenever I try to use it. I've made multiple modifications to the code but it's still not functioning properly. If anyone has any suggestions on how to resolve this issue, please help me out. 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" class="upload" id "selector"> Select a file: </label>

javascript html css

Answer 1

Answer №1

Firstly, there is a typo issue: id = "selector" in the <label> (missing "="). Use the example below to correctly 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>

The code above will display the name of the file selected next to the button:

https://i.sstatic.net/yag56.png

To limit the file types:

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

Answer 2

Firstly, there is a typo issue: id = "selector" in the <label> (missing "="). Use the example below to correctly 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>

The code above will display the name of the file selected next to the button:

https://i.sstatic.net/yag56.png

To limit the file types:

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

Resolving the issue of "Cannot set properties of null (setting 'innerHTML') at HTMLInputElement.loader" involves identifying the root cause and implementing

Answer №1

Similar questions

Attempting to extract text by utilizing the getText() function in Selenium along with Javascript

What is the best way to initiate an onload event from a script embedded within a jquery plugin?

Unable to remove both top and bottom drop shadows

Prevent the hiding of a select element with jQuery Chosen Select

The retrieval of data using PHP, MYSQL, and AJAX is unsuccessful

Ways to adjust flex division to occupy the entire height of its container

Can you explain the concept of a factory function to me?

Angular and Express: Automatically redirecting to the previous page after user login

React application experiencing continuous SpeechRecognition API without stopping

Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

Populating a read-only field with information from a database upon selecting an option

The AJAX request and UPDATE query are not working as expected

Implementing objects in a three.js scene without displaying them on the screen

"Upon refreshing, the background image reverts back to its original default setting

Element in list does not cover entire ul

In IOS 9.0, flex items do not wrap to new lines and result in overflow

Exploring PrimeNG's method for expanding and collapsing groups

Issue with the alignment of a sidebar on a website's html page

Tips for using ng-repeat in AngularJs to filter (key, value) pairs

Steps for showcasing stars (1-5) based on the data stored in the database