点击按钮移除hidden类后div仍不可见，页面空白求助

核心问题及修复步骤： #

• 页面空白的根本原因：触发了表单默认提交行为
  你的按钮是<input type="submit">，即使没有包裹在<form>标签里，浏览器也会默认触发页面跳转/刷新，导致页面空白。必须在点击事件中阻止这个默认行为。

• Planner不显示的额外问题：未定义变量报错
  JS代码中使用了weeklyT但没有提前声明，这会抛出ReferenceError，中断后续的planner.classList.remove('hidden')执行。

• 潜在隐患：重复的ID属性
  HTML里多个按钮用了相同的id="themeSubmit"，ID在页面中必须唯一，会导致后续DOM选择出现不可预期的问题，建议修改为不同ID或改用class选择。

修改后的代码示例 #

HTML（仅修正重复ID部分）：

<input class="btn btn-primary btn-lg btn-lg-planno" id="themeSubmitMain" type="submit" value="Save" >
<!-- planner -->
<div id="plannerWin">
    <div class="planner hidden" id="plannerWindow">
        <p id="headerText2">
            <svg id="svgStyle" xmlns="http://www.w3.org/2000/svg" width="978" height="74" viewBox="0 0 978 74"><g transform="translate(-1613 -1760)"><line x2="862" transform="translate(1666.5 1819.5)" fill="none" stroke="#707070" stroke-width="1"/><circle cx="14.5" cy="14.5" r="14.5" transform="translate(1652 1805)" fill="#b5b5b5"/><circle cx="14.5" cy="14.5" r="14.5" transform="translate(1805 1805)" fill="#b5b5b5"/><circle cx="14.5" cy="14.5" r="14.5" transform="translate(1992 1805)" fill="#b5b5b5"/><circle cx="14.5" cy="14.5" r="14.5" transform="translate(2181 1805)" fill="#b5b5b5"/><g transform="translate(2339 1805)" fill="#efeded" stroke="#707070" stroke-width="1"><circle cx="14.5" cy="14.5" r="14.5" stroke="none"/><circle cx="14.5" cy="14.5" r="14" fill="none"/></g><circle cx="14.5" cy="14.5" r="14.5" transform="translate(2514 1805)" fill="#b5b5b5"/><g transform="translate(1626 1838)"><text transform="translate(40 -64)" fill="#b5b5b5" font-size="15" font-family="Suissnord" letter-spacing="0.05em"><tspan x="-52.018" y="0">Monthly</tspan><tspan x="-37.308" y="19">Tasks</tspan></text></g><g transform="translate(1779 1838)"><text transform="translate(40 -64)" fill="#b5b5b5" font-size="15" font-family="Suissnord" letter-spacing="0.05em"><tspan x="-38.572" y="0">THEME</tspan></text></g><g transform="translate(1964 1838)"><text transform="translate(40 -64)" fill="#b5b5b5" font-size="15" font-family="Suissnord" letter-spacing="0.05em"><tspan x="-84.313" y="0">TEMPERATURE</tspan><tspan x="-52.454" y="19">RECORDS</tspan></text></g><g transform="translate(2155 1838)"><text transform="translate(40 -64)" fill="#b5b5b5" font-size="15" font-family="Suissnord" letter-spacing="0.05em"><tspan x="-45.121" y="0">WEEKLY</tspan><tspan x="-36.957" y="19">TASKS</tspan></text></g><g transform="translate(2313 1838)"><text transform="translate(40 -64)" font-size="15" font-family="Suissnord" letter-spacing="0.05em"><tspan x="-51.45" y="0">PLANNER</tspan></text></g><g transform="translate(2488 1838)"><text transform="translate(40 -64)" fill="#b5b5b5" font-size="15" font-family="Suissnord" letter-spacing="0.05em"><tspan x="-62.471" y="0">HANDOVER</tspan><tspan x="-37.938" y="19">NOTES</tspan></text></g></g></svg>
        </p>
        <p class="headerText">Planner</p>
        <textarea rows="5" style="width: 100%"></textarea>
        <input class="btn btn-primary btn-lg btn-lg-handover" id="themeSubmitPlanner" type="submit" value="Save">
        <input class="btn btn-primary btn-lg ml-3" id="themeSubmitSkip" type="submit" value="Skip">
        <img src="svg/back.svg" id="back">
    </div>
</div>

JavaScript（修复提交行为和变量问题）：

const planner = document.querySelector('.planner');
const btnPlanner = document.querySelector('.btn-lg-planno');
// 补充定义weeklyT变量，根据实际页面结构修改选择器
const weeklyT = document.querySelector('.weeklyT'); 

// Planner Activate
btnPlanner.addEventListener('click', function (event) {
    // 阻止默认提交行为，避免页面刷新
    event.preventDefault();
    // 增加判断避免变量未找到时报错
    if (weeklyT) {
        weeklyT.classList.add('hidden'); 
    }
    planner.classList.remove('hidden');        
});

内容的提问来源于stack exchange，提问作者w. dee