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:

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:

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

Text in gray overlaying image background

The calculator is experiencing issues with JavaScript functionality

Adaptable images - Adjusting image size for various screen dimensions

How can you loop through keys and values in a JSON object using JavaScript?

The request's body in the PUT method is void

jQuery UI - Add character right before the final element

Guide to dynamically setting a value in an input field using JavaScript's document.querySelector

Jquery's remove function fails to function correctly when used on a cloned element

Why is my JSON object being mistakenly interpreted as a string literal during iteration?

In Chrome, the $http GET request fails to send the JSESSIONID, but it functions properly on Firefox with AngularJS

What sets apart the <img> and <Image> layout attributes in NextJS?

Having trouble using jQuery's .off() method to remove an event handler?

AJAX Image Upload: How to Transfer File Name to Server?

How can I create a single-page application that adjusts to different screen sizes effortlessly?

How can you use the :not selector in CSS to target specific elements within a group?

Is there a way to position a ListItem (using React) in the lower left corner in this specific case?

What is the best way to pass an array as a parameter in Angular?

Do we need to use aria-labelledby if we already have label and input associated with "for" and "id"?

JavaScript encountered an issue: Uncaught ReferenceError - 'userNumber' is undefined at line 43

Is there a way to verify DNSSEC compatibility using node.js code?