Currently trying to make an image uploader, and this block of code isn't working. (I'll mark the error in *)

Question

<input type="file" name="inpFile" id="inpFile">
<div class="image-preview" id="imagePreview">
  <img src="" alt="Image Preview" class="image-preview__image">
  <span class="image-preview__default-text">Image Preview</span>
</div>

<script>
    const inpFile = document.getElementById("inpFile");
    const previewContainer = document.getElementById("ImagePreview");
    const previewImage = previewContainer*.querySelector(".image-preview__image");*
    const previewDefaultText = previewContainer.querySelector(".image-preview__default-text");

    inpFile.addEventListener("change", function() {
        const file = this.files[0];

        console.log(file);
    });
</script>

I get this error. Uncaught TypeError: Cannot read property 'querySelector' of null

Answer 1

Be careful with the letter case.

In your html you have a div with id="imagePreview", but in your script you are trying to get an element with id "ImagePreview".

Javascript is case sensitive, so "imagePreview" !== "ImagePreview". Try setting the same id in your HTML and script and you will get the required previewContainer element.