I want to make a simple function in JS to check file extension whenever the file input is changed. So far:

HTML:

<div>
<script src="{% static 'js/snip_uploads.js' %}" type="text/javascript"></script>
<label for="snip">Add a snip</label>
<input type="file" class="p-2 rounded"  onchange="checkExtension()" name="snip" id="snip_file">
<br>
</div>

JS:

var snip = document.getElementById("snip_file");
snip.addEventListener('change', checkExtension);

function checkExtension(event) {
  var input = event.srcElement;
  var fileName = input.files[0].name;
  var extension = fileName.substr(fileName.lastIndexOf("."));
  var allowedExtensionsRegx = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
  var file = document.getElementById(event.target.name)
  if (allowedExtensionsRegx.test(extension) == true) {
    // some stuff
  } else {
    //some other stuff
  }
}

But after I load the page I get Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). What am I missing?