JavaScript中点击复选框修改对象属性及表单提交问题排查

1. newBulletin.location赋值失败的原因及修复 #

你仅声明了let newBulletin;但未将其初始化为对象，此时newBulletin的值为undefined，给undefined添加属性会直接抛出错误，导致函数执行到赋值语句就中断，因此只显示了point 1。

修复代码：

function addLocation(location) {
    document.getElementById("nav").innerHTML = 'point 1';
    // 先初始化空对象，避免undefined报错
    if (!newBulletin) {
        newBulletin = {};
    }
    newBulletin.location = location; // 用传入的参数更灵活，无需硬写固定值
    document.getElementById("nav").innerHTML = 'point 2';
}

2. 提交表单后无法修改div样式的原因及修复 #

表单默认的submit事件会触发页面刷新，导致你修改display样式后，页面重新加载，div又回到初始的none状态；同时如果newBulletin未初始化，后续的判断逻辑也会报错。

修复代码：
首先修改HTML的表单提交事件，传入事件对象：

<form onsubmit="appendNewBulletin(event)">

然后修改JS函数：

function appendNewBulletin(e) {
    // 阻止表单默认提交刷新行为
    e.preventDefault();
    
    // 确保newBulletin已初始化，避免报错
    if (!newBulletin) {
        newBulletin = {};
    }
    
    // 先检查目标div是否存在，避免找不到元素报错
    const postDiv = document.getElementById("post1");
    if (postDiv) {
        if(newBulletin.location === "Home") {
            postDiv.style.display = 'block';
        }
        postDiv.style.display = 'block';
    }
    
    bulletinArray.push(newBulletin);
    // 重置对象，方便创建下一条新公告
    newBulletin = {};
}

额外优化建议 #

如果需要处理复选框的勾选/取消状态，可以在addLocation中补充判断逻辑：

function addLocation(location) {
    const checkbox = document.getElementById("add-home");
    document.getElementById("nav").innerHTML = 'point 1';
    if (!newBulletin) {
        newBulletin = {};
    }
    // 根据勾选状态添加或移除location属性
    if (checkbox.checked) {
        newBulletin.location = location;
    } else {
        delete newBulletin.location;
    }
    document.getElementById("nav").innerHTML = 'point 2';
}

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