How can I upload an image as a profile picture to my website?

Question

I've been trying to upload an image to my website, but it doesn't work. I want to upload an image as the profile pic of this web page.

Everytime I try to upload on the web page, the console shows this error: profile.js:4 Uncaught TypeError: Cannot set properties of null (setting 'onchange') at profile.js:4:20

Here is my code: HTML:

<img src="placeholder.jpg" alt="profile picture" style="margin-left: 650px; border-radius: 50%;" id="profile-pic">
    <input type="file" accept="image/jpeg, image/png, image/jpg" id="input-file">
    <label for="input-file" class="profile-pic-label">Update Image</label>

Javascript:

let profilePic = document.getElementById("profile-pic");
let inputFile = document.getElementById("input-file");

inputFile.onchange = function () {
    profilePic.src = URL.createObjectURL(inputFile.files[0]);
}

I tried finding a tutorial on how to do this, but they don't work.