入门开发者使用onclick实现元素显隐失效，头像上传功能无法正常运行求解决

DevOps 小满

2026-10-21

问题修复方案

现有代码问题清单

document.getElementsByClassName() 返回的是类数组集合（HTMLCollection），不是单个DOM元素，不能直接集体访问.style属性，需要遍历集合逐个修改
input 标签重复声明了id="input"属性，不符合HTML规范（单个页面id必须唯一）
JS中uploadImage函数内的变量未声明作用域，会污染全局变量，且冗余变量showImage不需要定义

修复后完整代码

HTML代码

<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">
</div>
<div>
    <button class='hidden_element' style="display: none;" onclick="uploadImage()">UPLOAD</button>
</div>

JS代码

function hideElement(){
    // 遍历所有匹配类名的元素修改显示状态
    var hideElements = document.getElementsByClassName('hidden_element');
    for(var i = 0; i < hideElements.length; i++){
        hideElements[i].style.display = hideElements[i].style.display === "none" ? "block" : "none";
    }
}

var uploadImage = function(){
    const imageUrl = document.getElementById('input').value;
    document.getElementById('put_image_here_bitch').setAttribute('src', imageUrl);
};