Beginner/ I try to use Onclick to unhide element but it doesn't work

I want to make a page to upload the avatar. By default, I use the vector to show where the image will appear and then provide a button to upload the URL to change the avatar. That's all it is! But the script still doesn't work. Pleased to hear your feedback on how to fix it. Bless

<img id="put_image_here_bitch" src="https://cdn0.iconfinder.com/data/icons/finance-vol-2-4/48/77-512.png" alt="" width="100px" height="100px">
<div class="block" > The person who uploads this is cool
</div>

<button onclick="hideElement()">Click to upload photo by URL</button>

<div>
    <input id="input" autofocus class='hidden_element' style="display: none;" type="text" id="input">
</div>
<div>
    <button class='hidden_element' style="display: none;" onclick="uploadImage()">UPLOAD</button>

    
</div>

This is my script

 function hideElement(){
    var hide = document.getElementsByClassName('hidden_element');
    if (hide.style.display === "none") {
    hide.style.display = "block";
    } else {
    hide.style.display = "none";
    }
}

var uploadImage = function(){
    image = document.getElementById('input').value;
    showImage = document.getElementById('put_image_here_bitch').setAttribute('src', image);

    
};