使用原生JavaScript无法显示隐藏元素的技术问题求助

核心问题：重复的ID属性 #

你代码里的关键错误是两个元素共用了同一个ID profile_first_name_edit——一个是带编辑按钮的<span>，另一个是你要显示的隐藏<p>。浏览器要求页面内ID必须唯一，当你用document.querySelector或getElementById时，只会匹配到第一个出现的元素（也就是那个<span>），根本没操作到目标段落，所以无论怎么调整样式都看不到效果。

修复步骤 #

1. 修改HTML，给目标段落设置唯一ID
   把隐藏段落的ID改成唯一值（比如profile_first_name_edit_form），同时将visibility:hidden换成display:none（visibility:hidden会保留元素占位，用display更适合无缝替换的需求）：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome to our website!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="profile">
        <p id="profile_first_name_show">
            <span class="profile_label">First name:</span>
            <span id="profile_first_name_edit">
                <span id="profile_first_name_value">{{ request.session.current_user_data.first_name }}</span>
                <button onclick="show_hidden()"><span class="glyphicon glyphicon-pencil"></span></button>
            </span>
        </p>
        <!-- 修改ID和隐藏方式 -->
        <p style="display: none;" id="profile_first_name_edit_form">
            text to show
        </p>
</div>
</body>
</html>

2. 调整JS代码，操作正确的元素
   将JS里的选择器替换为新的ID，用display:block显示目标段落：

function show_hidden() {
    // 显示目标编辑段落
    document.getElementById('profile_first_name_edit_form').style.display = "block";
    // 隐藏原展示段落
    document.getElementById('profile_first_name_show').style.display = "none";
}

可选：添加切换回原段落的功能 #

如果之后需要恢复原段落显示，可以补充一个切换函数：

function back_to_show() {
    document.getElementById('profile_first_name_edit_form').style.display = "none";
    document.getElementById('profile_first_name_show').style.display = "block";
}

然后在编辑段落里添加按钮调用该函数即可。

内容的提问来源于stack exchange，提问作者thewaterbuffalo